Текст - CSS свойства

306
посл. ред. 01.11.2016

Краткое описание свойств

text-decoration
Дополняет оформление текста чертой.
text-transform
Преобразует регистр букв текста в заглавные или строчные символы.
text-align
Определяет горизонтальное выравнивание текста в блоке.
text-align-last
Определяет горизонтальное выравнивание последней строки текста.
text-indent
Задает отступ первой строки текста.
text-overflow
Определяет как обрезается текст, который не помещается в блоке.
white-space
Устанавливает, как представлять пробелы в тексте.
color
Задаёт цвет текста.

Свойство text-decoration

Дополняет оформление текста чертой.

Краткая информация

Значение по умолчанию none
Применяется ко всем элементам
Наследуется нет
Имя свойства в DOM textDecoration

Значения

  • none - без оформления.
  • underline - текст становится подчёркнутым.
  • overline - линия над текстом.
  • line-through - зачёркнутый текст.

Примечания

Чтобы применить сразу несколько значений, их необходимо перечислить через пробел.

Свойство text-transform

Преобразует регистр букв текста в заглавные или строчные символы.

Краткая информация

Значение по умолчанию none
Применяется ко всем элементам
Наследуется да
Имя свойства в DOM textTransform

Значения

  • none - не меняет регистр.
  • capitalize - каждое слово начинается с заглавной буквы.
  • lowercase - все символы преобразуются в строчные.
  • uppercase - все символы преобразуются в заглавные.

Свойство text-align

Определяет горизонтальное выравнивание текста в блоке.

Краткая информация

Значение по умолчанию start
Применяется к блочным элементам
Наследуется да
Имя свойства в DOM textAlign

Значения

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

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

Определяет горизонтальное выравнивание последней строки текста. В основном используется, если для свойства text-align задано значение justify.

Краткая информация

Значение по умолчанию auto
Применяется к блочным элементам
Наследуется да
Имя свойства в DOM textAlignLast

Значения

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

Свойство text-indent

Задает отступ первой строки текста (красная строка). Актуально для параграфа <p>.

Краткая информация

Значение по умолчанию 0
Применяется к блочным элементам
Наследуется да
Имя свойства в DOM textIndent

Значения

Можно использовать как абсолютные величины, так и относительные.

Свойство text-overflow

Определяет как обрезается текст, который не помещается в блоке. Работает только тогда, когда свойство overflow имеет значение auto, scroll или hidden.

Краткая информация

Значение по умолчанию clip
Применяется к блочным элементам
Наследуется нет
Имя свойства в DOM textOverflow

Значения

  • clip - текст просто обрезается.
  • ellipsis - текст обрезается, но в конце добавляется многоточие.

Свойство white-space

Устанавливает, как представлять пробелы в тексте.

Краткая информация

Значение по умолчанию normal
Применяется ко всем элементам
Наследуется да
Имя свойства в DOM whiteSpace

Значения

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

Свойство color

Задаёт цвет текста.

Краткая информация

Значение по умолчанию зависит от браузера
Применяется ко всем элементам
Наследуется да
Имя свойства в DOM color

Значения

Можно выбрать любой способ задания цвета, используемый в CSS.