Форматирование текста

Свойства данной категории влияют на отображение символов, слов и абзацев. Они определяют расстояние между словами и буквами в словах, задают отступы и высоту строк в абзацах.

Свойство letter-spacing влияет на расстояние между символами при отображении текста. Его значение, задаваемое в единицах длины, определяет пробел, добавляемый к установленному по умолчанию пробелу между символами. Ниже показано отображение текста с увеличенными на 0.5em пробелом между символами:

С л о в о С л о в о С л о в о С л о в о С л о в о

Примечание
Браузер увеличивает расстояния не только между символами слов, но и расстояние между словами, т.к. пробел - это тоже символ.

Каскадные таблицы стилей позволяют преобразовывать текст. Если значение свойства text-transform равно capitalize , то все слова отображаются с прописной буквы. Значения uppercase и lowercase этого свойства приводят, соответственно, к преобразованию всех букв в прописные или строчные, независимо от их задания в тексте документа HTML. Значение none снимает все установки, приобретённые в результате наследования.

Свойство text-decoration задает подчеркивание, надчеркивание или перечеркивание текста. Соответствующие значения этого свойства следующие: underline , overline и line-through .

Выравнивание текста в блоке содержимого элемента определяется значением свойства text-align . Текст выравнивается по левому краю при значени left , по правому краю - при значении right и по центру - при значении center .

Предупреждение
Текст выравнивается относительно блока содержимого элемента, а не относительно окна отображения браузера.

Отступ первой строки элемента задаётся значением свойства text-indent , которое определяет величину отступа в абсолютных или относительных единицах длины.

Свойство vertical-align определяет положение элемента по вертикали относительно элемента-родителя. Его значением может быть любое ключевое слово из таблицы:

Ключивые значения выравнивания по вертикали

Значение	Результат
baseline	Выравнивание базовой линии элемента (или низа, если элемент не имеет базовой линии) по базовой линии родителя
middle	Выравнивание средней точки элемента (обычно изображения) на уровне базовой линии родителя плюс половина ширины блока содержимого родителя
sub	Элемент отображается в виде нижнего индекса
super	Элемент отображается в виде верхнего индекса
text-top	Выравнивание верха элемента с верхом шрифта элемента-родителя
text-bottom	Выравнивание низа элемента с низом шрифта элемента-родителя
top	Выравнивание верха элемента с верхом самого высокого элемента строки
bottom	Выравнивание низа элемента с элементом, расположеным ниже всех элементов строки

Напоминаем, базовая линия - это нижняя часть линии текста, которая проводиться без учёта нижней части (descender) некоторых символов, например, букв типа j, q, y.

Свойство line-height . Значение этого свойства, заданные в виде процентов, вычисляются относительно строки самого элемента. Он поднимают базовую линию (или низ элемента, если он не имеет базовой линии) на заданную высоту относительно базовой линии элемента-родителя, если значение положительно, и опускают, если значение отрицательно.

Расстояние между базовыми линиями двух соседних строк (высота строки) задаётся установкой значения свойства line-height . Числовое значение этого свойства определяет высоту строки, вычисляемую умножением размера шрифта текущего элемента на заданное число.

Примечание
Все текстовые свойства, кроме свойств text-decoration и vertical-align , наследуются элементами-потомками от родителей.

Данный HTML-код демонстрирует примеры использования изложенной информации:

Для просмотра работы кода кликните здесь.