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

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

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

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

Наследование свойства от родителя говорит о том, что, если для section назначено свойство text-align: center, то и для заголовка h2, и для 4-х <div class="column">, вложенных в нее, будет работать это же свойство, выравнивая текст по центру во всех внутренних блоках, сколько бы их не было. Если же для внутренних элементов  нужно выровнять текст по левому краю, то следует записать для .column {text-align: left; }, переопределив аналогичное свойство у родительского элемента (2-я колонка в примере).

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

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

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

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

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

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

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-last

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

Значения:

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

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

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

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

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

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

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

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

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

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 вместе с дополнительными свойствами для оформления линий.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Еще один пример текста с тенью от Adam Argyle:

See the Pen highlight compliment to a text-shadow effect by Adam Argyle (@argyleink) on CodePen.

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

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

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

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

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

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

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

Значения:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Значения:

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

Пример изменения letter-spacing при наведении на кнопку:

See the Pen button on :hover letter-spacing by Burmese Potato (@BurmesePotato) on CodePen.

Свойства 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-width (-webkit-text-stroke-width) - толщина контура (в любых единицах CSS).
• text-stroke-color (-webkit-text-stroke-color) - цвет контура (любым доступным способом для указания цветов).

Пример использования -webkit-text-stroke:

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

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

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

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

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

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

See the Pen -webkit-text-stroke practice by Burmese Potato (@BurmesePotato) on CodePen.