Для текста css: 61 CSS-эффект для текста — Записки преподавателя

Обрезание текста по вертикали или что делать если текст не влез по высоте / Хабр

14 фев 2014 в 14:54

Время на прочтение 2 мин

46K

Разработка веб-сайтов *CSS *

Туториал

Если вам это знакомо то прошу под кат.

Совсем недавно наткнулся на такую вот проблему. Длительное гугление если и давало результат то очень половинчатый. В CSS для горизонтального переполнения текстом существует text-overflow но вот его аналога для такого переполнения по вертикали нету. Многие предлагают использовать nowrap в месте с text-overflow но такой подход не универсален и мало кому подходит. Если у нас в блоке произвольный html код то выхода нет. На некоторых известных сайтах так и писали: «Для этой задачи нету решения, старайтесь чтобы в блок влезало целое количество строк». Кроме того некоторые предлагали использовать JS, что так же было не приемлемо.

<div>
        <h3>A Long Message</h3>
        <p>This is a very long message and will be cut off. This is a very long message and will be cut off. </p>
        <p>This is a very long message and will be cut off. This is a very long message and will be cut off. </p>
</div>

И CSS:

h3 {
    font-size: 1.3em;
}
.box {
    margin: 1em;
    border: 1px solid #ccc;
    width: 150px;
    height: 55px;
    overflow: hidden;
}

В этом случае наш текст скорее всего будет разрезан по пополам.
Теперь если мы хотим избавиться от этого эффекта нужно добавить некий wrapper (обёртку):

<div>
    <div>
        <h3>A Long Message</h3>
        <p>This is a very long message and will be cut off. This is a very long message and will be cut off. </p>
        <p>This is a very long message and will be cut off. This is a very long message and will be cut off. </p>
    </div>
</div> 

Вот с таким или стилем:

.wrapper {
    -webkit-column-width: 150px; //К сожалению тут надо явно указывать размер родительского блока, 100% не работает
    column-width: 150px;
    height: 100%;
}

Собственно и всё… те строки которые не уместились перетекут в следующую колонку, а так как у родительского блока стоит overflow: hidden то мы их не увидим. Минусом такого подхода может быть только скорость отработки этого действия браузером, но она всё равно гораздо быстрее суррогатов на JS. Если волнуетесь по поводу поддержки браузерами то она уже очень хорошая: caniuse. com/multicolumn. Вот работающий пример: jsfiddle.net/4Fpq2/9.
Заранее извиняюсь если это оказалось только для меня открытием.

Теги:

• css
• js
• text-overflow

Хабы:

• Разработка веб-сайтов
• CSS

Всего голосов 30: ↑21 и ↓9 +12

Комментарии 33

Журавлёв Юрий @stalkerg

Разработчик

Комментарии Комментарии 33

CSS-свойства для текста — HTML+

CSS-свойства для текста, как правило, начинаются с приставкой text- или word-, и предполагают работу с текстовыми блоками с точки зрения форматирования текста. Здесь речь идёт именно о текстовых блоках, как блочных элементах, а не о строчных, т.к. к строчными элементам эти свойства применяются реже, а некоторые не применяются вовсе.

Значения по умолчанию. Наследование от родителей (inherit).

Каждое свойство из представленных ниже, как и вообще в CSS, имеет значение по умолчанию, которое применяется к тексту благодаря тому, что в любом браузере подключается таблица стилей браузера (user agent stylesheet), в которой эти свойства указаны и поэтому работают. Кроме того, для многих свойств существуют значения inherit, которое означает «унаследовано от родителя», и initial, что значит «сброс до значения по умолчанию».

Наследование свойства от родителя говорит о том, что, если для section

Посмотрите код примера.

See the Pen Inline-block columns by Elen (@ambassador)
on CodePen.0

В том случае, если нужно вернуться к значению по умолчанию вместо явного указания этого значения, можно использовать значение initial. Тогда вы получите нужный вам вариант (4-й столбец в примере выше).

Значение inherit можно использовать для того, чтобы назначить какому-либо элементу то значение, которое заложено в родительском элементе. Так с его помощью, например, можно сделать ссылки того же цвета, что и основной текст (темно-серыми), а не синими по умолчанию. Пример можно увидеть ниже. Проанализируйте код на вкладках HTML и CSS.

See the Pen inherit color for link by Elen (@ambassador)on CodePen. 0

В этой статье мы рассмотрим следующие свойства для форматирования текста:

1. Выравнивание текста. Свойство text-align
2. Свойство text-align-last
3. Изменение регистра символов. Свойство text-transform
4. Оформление текста с помощью линий. Свойство text-decoration и другие
5. Свойство text-decoration-skip-ink
6. Тень для текста. Свойство text-shadow
7. Красная строка. Свойство text-indent
8. Пробелы между словами. Свойство white-space
9. Перенос длинных слов. Свойство word-wrap
10. Свойство word-break — перенос строк внутри слов
11. Свойство letter-spacing — интервал между буквами.
12. Свойство word-spacing — интервал между словами.
13. Свойства text-stroke и text-fill-color — контур и заливка текста

Выравнивание текста. Свойство text-align

В любом текстовом элементе вы можете выровнять текст по левому (left), правому краю (right), по центру (center) или по ширине (justify).

Свойство text-align

text-align: left (по умолчанию) | right | center | justify

Смотрим на варианты применения свойства в действии

Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde necessitatibus voluptas quasi odit, corrupti aut harum officiis molestiae delectus? Quos, quod natus. Quod expedita modi quos et numquam unde delectus maiores deleniti rem facere, optio beatae laboriosam maxime enim totam.

Свойство text-align-last

Свойство text-align-last позволят задать, как выравнивается последняя строка блока текста. Чаще всего применяется в том случае, когда текст выравнивается по ширине контейнера для того, чтобы последняя строка смотрелась красиво.

text-align-last: auto | start | end | left | right | center | justify

Значения:

• auto — совпадает с выравниванием, заданным свойством text-align, за исключением значения justify. Для него выравнивание будет как start.
• start — последняя строка выравнивается по начальному краю блока
• end — последняя строка выравнивается по конечному краю блока.
• left — последняя строка выравнивается по левому краю.
• right — последняя строка выравнивается по правому краю.
• center — последняя строка выравнивается по центру.
• justify — последняя строка выравнивается по ширине.
  Если в последней строке только одно слово, то оно будет выравнено по левому краю.

Вы можете попробовать сами на примере с разными вариантами свойства text-align.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, eligendi mollitia aliquam deserunt voluptatem soluta, inventore iusto illo ducimus aut sed officiis pariatur quam exercitationem excepturi sint laborum! Tempore neque quam, explicabo nam dicta, a aliquam voluptates iure id quas voluptas similique vel aliquid, dolorum modi? Autem error ab quas nemo a mollitia eius in est dolorum vero reprehenderit cumque, facere culpa odit? Exercitationem nobis facere, unde earum accusamus tenetur!

Eos ut quo iure culpa doloribus. Distinctio earum, quibusdam doloremque adipisci mollitia quaerat architecto quod ad hic, in odit nemo ea suscipit exercitationem saepe eos vitae! Quidem quae soluta, error sed illum culpa rem sit cupiditate alias hic eum laudantium vel ad eveniet quia animi tempora at, unde accusamus, officia ipsa reiciendis voluptatem similique.

Изменение регистра символов. Свойство text-transform

Как следует из его названия, свойство text-transform отвечает за трансформацию текста, что выражается в изменении регистра символов, поэтому значения этого свойства таковы:

1. lowercase — все строчные;
2. uppercase — все заглавные;
3. capitalize — каждое слово начинается с большой буквы;
4. none — отменяет изменение регистра (по умолчанию).

Тестируем все варианты:

Officiis eos, minima libero facilis omnis quidem sint ipsa, sit voluptates enim esse repellendus mollitia in hic dolorem cum perferendis temporibus accusamus. Quod commodi voluptates doloremque distinctio ad, corporis incidunt nihil consequatur perspiciatis ea repudiandae ipsam velit. Totam, asperiores adipisci!

Оформление текста с помощью линий. Свойство text-decoration и другие

Свойство text-decoration со значением underline является обязательным для ссылок, т.к. они по умолчанию подчеркнуты. В том случае, когда ссылки нужно лишить подчеркивания, это свойство имеет значение none. Остальные его варианты встречаются реже, хотя знать их тоже надо. В отличие от других свойств, text-decoration применяется как к блочным, так и к строчным (display: inline) или строчно-блочным (display: inline-block) тегам.

Значения свойства text-decoration

text-decoration: none | underline | overline | line-through

Значения означают:

1. underline — подчеркнутый текст.
2. overline — линия над текстом (надчеркивание).
3. line-through  — перечеркнутый текст;
4. none — подчеркивание, перечеркивание или надчеркивание отсутствует (значение по умолчанию для всех элементов, кроме ссылок)

В этом свойстве на самом деле можно выделить 3 отдельных свойства:

1. text-decoration-line, т.е. вид линии, с такими же значениями, что и у text-decoration;
2. text-decoration-style, т.е. стиль декоративной линии, значения которого очень похожи на значения для рамок (границ) элемента + wavy (волнистая линия).
3. text-decoration-color  — цвет линии, значения которого можно задать в виде любых доступных в CSS значений цвета: red, #f00, rgb(255, 0, 0) и др.

Давайте протестируем на примере свойство text-decoration вместе с дополнительными свойствами для оформления линий.

Quibusdam autem aperiam, dolore magnam cum, dicta facere maiores dolor consequuntur eum reprehenderit sed assumenda fugit dolorum impedit sequi ratione iure at suscipit ipsum recusandae mollitia adipisci. Deleniti, ab harum. Deleniti quos tenetur reprehenderit beatae qui debitis praesentium obcaecati totam?

Вы также можете использовать 3 свойства вместе в виде составного свойства text-decorati0n:

Составное свойство text-decoration

text-decoration: text-decoration-line text-decoration-color text-decoration-style; Например, text-decoration: underline red dashed;

Пример в реальном виде:

Текст для подчеркивания

Свойство text-decoration-skip-ink

Свойство text-decoration-skip-ink определяет, как будет выводится подчеркивающая линия на таких буквах, как «р», «ц», «щ», «у» и др. , которые имеют выносные элементы ниже базовой линии, на которую «опираются» остальные буквы. Доступные значения: auto (линия прерывается) и none (сплошная линия).

Сравните подчеркивание слова выступающими «у» и «р»:

auto: Куркума none: Куркума

Красная строка. Свойство text-indent

Свойство text-indent управляет отступов первой строки текстового блока слева. В школе это называлось «красная строка», или «абзац». В html-страницах используется довольно редко. В качестве значения можно указать количество px, em, rem и др. или %, в том числе и отрицательные величины. Когда значение указывают в процентах, отступ первой строки рассчитывается в зависимости от ширины блока.

Свойство text-indent

text-indent: значение в px, pt, vw и др.| % от ширины родителя

Пример позволит вам протестировать отступы первой строки абзацев в пределах -20xp … 20px.

Тень для текста. Свойство text-shadow

Для того чтобы назначить тень для символов (букв), составляющих текстовый блок, необходимо использовать свойство text-shadow.

По умолчанию тени у текста нет (значение none). Когда вы ее назначаете, вы должны указать 2 обязательных параметра — dx (смещение по горизонтали) и dy (смещение по вертикали), а также размытие (blur) и цвет (color).

Тень для текста. Свойство text-shadow

text-shadow: none (по умолчанию) | dx dy blur color; /*Теней может быть несколько */ text-shadow: none | <тень> [[,<тень>], <тень>]

Теней у текста может быть несколько. В этом случае все параметры каждой тени указываются через запятую.

В примере ниже вы найдете разные варианты назначения свойства text-shadow для заголовков первого уровня <h2>. Увлекаться этим свойством для большого объема текста не стоит.

See the Pen CSS3 text-shadow effects by Elen (@ambassador)
on CodePen.0

Пробелы между словами. Свойство white-space

Свойство white-space позволяет управлять пробелами между словами. Поскольку браузер игнорирует любое количество пробелов и переводов строки в коде HTML и показывает их на веб-странице, как один, обычно используют тег <pre> для вывода текста с тем форматированием, что есть в редакторе. Свойство white-space позволяет сделать это для любого элемента, причем не меняя шрифт на моноширинный, в отличие от <pre>.

Значения для свойства white-space:

Значения для свойства white-space

white-space: normal | nowrap | pre | pre-line | pre-wrap

• normal — значение по умолчанию, переносы строк устанавливаются автоматически.
• nowrap — никакие пробелы не учитываются, переносы строк игнорируются, текст отображается одной строкой. Перенести текст на новую строку можно с помощью тега <br>.
• pre — аналог тега <pre>: текст показывается с учётом всех пробелов и переносов, как они были добавлены текстовом редакторе. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.
• pre-line — в тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.
• pre-wrap — все пробелы и переносы сохраняются, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесён на следующую строку.

Давайте протестируем работу каждого из значений на примере части  стихотворения, разбитого на строчки:

Весь мир начинается с мамы… И в сердце хранится портрет Той женщины ласковой самой, Которой родней в мире нет… И с первой минуты рожденья, Она, словно ангел земной, Подарит любовь и терпенье… Она за ребёнка стеной… Ирина Самарина-Лабиринт. Источник

Перенос длинных слов. Свойство word-wrap

Свойство word-wrap указывает, нужно ли переносить длинные слова, которые не помещаются по ширине в заданную область.

Значения:

Значения свойства word-wrap

word-wrap: normal | break-word

normal — строки не переносятся совсем или переносятся только в тех местах, где явно задан перенос (с помощью тега <br>).
break-word — перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока.

В примере ниже внутри блоков с шириной 300px (width: 300px) размещен текст с длинными словами, но с разным значением свойства word-wrap.

word-wrap: break-word
прилагательное «тетрагидропиранилциклопентилтетрагидропиридопиридиновые» состоит из 55 букв. Или «метоксихлордиэтиламинометилбутиламиноакридин» – 44 знака.

word-wrap: normal
прилагательное «тетрагидропиранилциклопентилтетрагидропиридопиридиновые» состоит из 55 букв. Или «метоксихлордиэтиламинометилбутиламиноакридин» – 44 знака.

Свойство word-break — перенос строк внутри слов

Свойство word-break предназначено для того, чтобы сделать перенос строк внутри слов, которые не помещаются по ширине в заданную область.
Значения:

Значения свойства word-break

word-break: normal | break-all | keep-all

Они означают:

• normal — значение по умолчанию. Обычно строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью <br>).
• break-all — Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока. Значение не работает для текста на китайском, корейском или японском языке.
• keep-all — не разрешает перенос строк в словах на китайском, корейском или японском языке. Для остальных языков работает, как normal.

Попробуйте сами:

Прилагательное «тетрагидропиранилциклопентилтетрагидропиридопиридиновые» состоит из 55 букв. Или «метоксихлордиэтиламинометилбутиламиноакридин» – 44 знака.

Другой пример: приставка «пра-» может использоваться в понятии, которое обозначает степень родства, множество раз – «прапрапрапрапрапрапрапрапрапрапрадедушка». Теоретически это слово можно растягивать до бесконечности.

Свойство letter-spacing — интервал между буквами.

Свойство letter-spacing может изменять интервал между буквами (символами) в элементе. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Можно использовать положительные и отрицательное значения. Как правило, значение letter-spacing должно быть небольшим, чтобы буквы смотрелись цельно. Чаще всего его используют для заголовков или каких-либо выделений, как для блочных, так и для строчных элементов.

Значения лучше указывать в тех единицах измерений, которые связаны с размером шрифта.

Значения свойства letter-spacing

letter-spacing: значение в px, pt, em, ex, но не в %| normal (по умолчанию)

В примере для тестирования значения изменяются от -6 до 10px.

Свойство word-spacing — интервал между словами.

Свойство word-spacing поможет вам изменить интервал между словами. Положительные значения свойства увеличивают интервал, отрицательные — уменьшают. Если для текста задано выравнивание с помощью свойства text-align со значением justify (выравнивание по ширине), то интервал между словами будет установлен принудительно, но не меньше значения, указанного в свойстве word-spacing.

Внимание! Значения в % в этом свойстве не применяются.

Значения:

Значения свойства word-spacing

word-spacing: значение в px, pt, em, rem, vw, vh, но не в % | normal

Измените интервал между словами от -20px до 20px для примера ниже:

Свойства text-stroke и text-fill-color — контур и заливка символов текста

На данный момент свойство text-stroke является экспериментальным. В соответствии с названием оно позволяет задать контур для текста, который часто используют дизайнеры в таких программах, как Adobe Illustrator, Figma, Sketch или других приложениях для создания векторных изображений. В настоящее время свойство text-stroke не включено ни в одну спецификацию W3C или WHATWG. При поиске этого свойства на MDN можно увидеть информацию только о свойстве -webkit-text-stroke, а также о составляющих его свойствах -webkit-text-stroke-width (ширина, или толщина контура) и -webkit-text-stroke-color (цвет контура), причем браузеры Mozilla Firefox, Opera и Microsoft Edge также поддерживают это свойство именно с префиксом -webkit, но не поддерживают пока без него.

Поддержка свойства -webkit-text-stroke современными браузерами очень хороша — 97% (проверьте сами на caniuse.com), но при наведении на любой из них вы увидите, что префикс должен быть именно -webkit:

Синтаксис:

Синтаксис text-stroke

-webkit-text-stroke: -webkit-text-stroke-width | -webkit-text-stroke-color | initial | inherit; text-stroke: text-stroke-width | text-stroke-color | initial | inherit; Пример: -webkit-text-stroke: 4px pink; text-stroke: 4px pink;

Составляющие свойства:

• text-stroke-width (-webkit-text-stroke-width) — толщина контура (в любых единицах CSS).
• text-stroke-color (-webkit-text-stroke-color) — цвет контура (любым доступным способом для указания цветов).

Пример использования

See the Pen -webkit-text-stroke property by Elen (@ambassador)
on CodePen.0

В примере для указания размера шрифта и контура использованы css-единицы vmin, зависящие от минимальной ширины или высоты вьюпорта браузера, поэтому и шрифт, и контур будет изменяться вместе с размерами браузера.

В качестве дополняющего свойства для text-stroke используется свойство text-fill-color, которое предназначено для заливки символов текста.

Значения задаются в виде всех доступных вариантов для назначения цвета:

Значения text-fill-color

text-fill-color: color | initial | inherit;

Если свойство text-fill-color не указано, используется значение свойства color. По сути своей работы свойства text-fill-color и color одинаковы, но text-fill-color имеет приоритет над color, если они имеют разные значения. Это видно в примере выше, в которм свойство color имеет черный цвет (#000), а text-fill-color  — темно-серый (#333). Мы видим, что символы текста залиты именно темно-серым цветом.

Оба свойства: и  text-stroke, и text-fill-color можно анимировать. Это сделано в примере при наведении на ссылки с помощью свойства transition.

Просмотров: 923

Текстовая ориентация CSS | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

?

Текстовая ориентация CSS

• Глобальное использование

  96,66% + 0% «=» 96,66%

Свойство CSS text-orientation определяет ориентацию текста в строке. Текущие значения действуют только в режимах вертикальной типографики (определяемых параметром 9).0018 Письмо -режим Собственность)

Chrome

1. 4 — 47: не поддерживается
2. 48 — 109: Поддерживается
3. 110: Поддерживается
4. 111 — 113: поддержан

EDGE

5555555138888888888888888888 8
1. 88888 8
2. 88888 8
3. 88888 8. supported
4. 79 — 109: Supported
5. 110: Supported

Safari

1. 3.1 — 9.1: Not supported
2. 10: Support unknown
3. 26% — Supported, requires this prefix to work: -webkit-«> 10.1 — 13.1: Supported
4. 14 — 16.2: Supported
5. 16.3: Поддерживается
6. 16,4 — TP: Поддерживается

Firefox

1. 2 — 37: не поддерживается
2. 38 — 40: инвалид по умолчанию
3. 41 — 109: Поддержка
4. 707070707010: 110015
110015. : Поддерживается

Opera

1. 9 — 34: не поддерживается
2. 35 — 94: Поддерживается
3. 95: Поддерживается

IE

1. 17% — Not supported»> 5.5 — 10: не поддерживает
1. 5.5 — 10: не поддерживает
9008
2. 5.5 — 10: не поддерживает
9 9001 9001 9001 9001 9001 9001 9001 9001 9001 9001 9001: не поддерживают
1. 5.5 — 10: не поддерживают0013 Chrome для Android
   1. 110: Поддерживается

   Safari на iOS

   1. 3,2 — 9,3: не поддерживается
   2. 10 — 16,2: Поддержка
   3. 16.3: поддержка
   4. 16.4: Поддержка
   5. 16.3: поддержка
   6. 00% — Supported»> 16.4: Поддержка
   7. 16.3: поддержка
   8. 16.4: Поддержка
   9. 16.3: поддержка
   10. 16.4: Поддержка
   11. 16.3: поддержка
   12. 16.4: Поддержка
   13. 16.3: Поддержал
   14. 16.4: Поддерживается 4: Не поддерживается
   15. 5–18.0: Поддерживается
   16. 19.0: Поддерживается

   Opera Mini

   1. все: Не поддерживается

   Opera Mobile

   1013 1.0015
   1. 73: поддержан

   UC Browser для Android

   1. 89% — Supported»> 13,4: поддержан

   Browser Android

   1. 2,1 — 4.4.4: не поддерживается
   2. 10: 70015 2
      115 2
   2
   1111134 2
2
111134 2
2

QQ Browser

1. 13.1: Supported

Baidu Browser

1. 13.18: Supported

KaiOS Browser

1. 2.5: Supported

Ресурсы:

Текстовая ориентация CSS на MDN

Совет CSS: переполнение текстом

Просто убедиться, что текст, который может быть длинным, не нарушает наш макет, тривиально, но я видел несколько новичков в CSS иметь проблемы с этим или просто пропустить это вообще только для того, чтобы QA (или, что еще хуже, пользователь) зарегистрировали ошибку об этом.

Наивный подход обычно заключается в том, чтобы просто добавить элементу ширину и предположить, что проблема решена. Но это не так, друзья мои :

Текст несколько длиннее ожидаемого

 1
2
3
 

 <дел>
    Какой-то более длинный, чем ожидалось, текст

Как мы видим, текст увеличивает высоту элемента. Предполагая, что это будет работать с нашим макетом, вы можете предположить, что мы все готовы к работе. Но так ли это на самом деле?

Какой-то более длинный, чем ожидалось, текст с антидезистестментарианством

 1
2
3
 

 <дел>
    Какой-то более длинный, чем ожидалось, текст с антидезистестментарианством

А, там течет. Мы, конечно, можем добавить overflow-x: hidden , но что, если мы хотим, чтобы весь контент отображался? Это, друзья мои, работа для word-wrap: break-word :

Какой-то более длинный, чем ожидалось, текст с антидезистестментарианством

 1
2
3
 

 <дел>
    Какой-то более длинный, чем ожидалось, текст с антидезистестментарианством

Хорошо, похоже, это работает (примечание: в некоторых браузерах вы можете сделать текст с дефисом). Теперь, отступив немного назад, что, если мы не можем сделать так, чтобы он занимал несколько строк? Мы также можем ограничить это, добавив height к элементу:

Текст несколько длиннее ожидаемого

 1
2
3
 

 <дел>
    Какой-то более длинный, чем ожидалось, текст

Облом. О, я знаю! Давайте добавим overflow-y: hidden :

Какой-то более длинный, чем ожидалось, текст

Хорошо, похоже, это помогает. Или это так?

Теперь длинное ууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууу

 1
2
3
 

 <дел>
    Теперь долго woooooooooooooooooooooooooooooooooord

Хамф. Горизонтальный скроллер, хотя отображаемое содержимое не такое длинное. Думаю, нам придется пойти с переполнение: скрыто вообще тогда:

Теперь длинное ууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууу одногоаааааа

 1
2
3
 

 <дел>
    Теперь долго woooooooooooooooooooooooooooooooooord

Ладно, думаю, я перестану вас одурачивать. Я просто добавлю, что мне нравится добавлять многоточие, чтобы было ясно, что некоторый текст был обрезан с помощью text-overflow: ellipsis . Проблема в том, что text-overflow работает только с однострочным содержимым, поэтому мы должны убедиться, что текст нашего элемента не переносится, добавив пробел : nowrap :

Теперь длинный woooooooooooooooooooooooooooooord

 1
2
3
 

 <дел>
Теперь долго woooooooooooooooooooooooooooooooooord

Переполнение прочь 🙂

«Поддержка AngularJS похожа на Cobol 🤷…»

Вы хотите сделать AngularJS правильный путь .
Тем не менее, каждая запись в блоге, которую вы видите, выглядит так, как будто ваша кодовая база устарела. Компоненты? Крючки жизненного цикла? Контроллеры мертвы?

Было бы здорово снова поработать над современной кодовой базой, но у кого есть недели на переписывание?
Что ж, вы можете вернуть свое приложение в форму, не отодвигая сроки! Представьте, что вы плавно обновляете свои обычные задачи, больше не зацикливаясь на устаревших версиях.