word-spacing css форматирование текста примера

Форматирование текста – задача, которая часто стоит перед дизайнерами. Когда дело доходит до правки HTML документа, для красивого отображения текста мы, как всегда, обращаемся CSS свойствам.
Сегодня речь пойдет о word-spacing.

Для чего используется? Word-spacing используется в CSS для того, чтобы определить такое свойство текста , как расстояние между словами внутри HTML тега.

Как (синтаксис)? Расстояние между словами указывается в единицах измерения. Обычно такой единицей является пиксель. Рассмотрим пример:

<style>
div.textWithSpace {
word-spacing: 0.5px;
}
</style>
<div class="textWithSpace">
Буря мглою небо кроет, Вихри снежные крутя, То как зверь она завоет, То заплачет как дитя...
</div>

В рассмотренном примере расстояние между словами составило пол пикселя. Кроме пикселей расстояние можно указывать в точках (pt) или сантиметрах (cm).

Также свойство word-spacing может принимать значение normal. Это значение используется по-умолчанию, то есть тогда, когда Вы вообще не задействовали word-spacing.
Если в word-spacing указать значение inherit блок текста унаследует расстояние между словами равное расстоянию из родительского блока. Например:

<style>
div.text1 {
word-spacing: 1.5pt;
}
div.text2 {
word-spacing: inherit;
}
</style>
<div class="text1">
Буря мглою небо кроет, Вихри снежные крутя,
<div class="text2">То как зверь она завоет, То заплачет как дитя...</div>
</div>

В обоих div блоках расстояние между словами полтора поинта (точки).

Опубликовано 22.07.2014 в 13:11 · Автор Вебдизайнеру, сисадмину, вебмастеру · Ссылка
Рубрики: CSS, HTML · Теги: , , , , ,