Свойство CSS word-spacing
Свойство word-spacing позволяет изменять расстояние между словами в тексте, а не между отдельными символами.
Это свойство может принимать положительное или отрицательное значение. Положительное значение добавляет дополнительное пространство между словами, тогда как отрицательное значение уменьшает расстояние между ними. Если свойство установлено в значение "normal", расстояние между словами будет определяться заданным шрифтом.
Чтобы убрать пространство между элементами inline-block, можно установить для контейнера font-size равным 0 или использовать отрицательные отступы (margin).
Свойство word-spacing можно анимировать с помощью свойства transition.
INFO
Свойство word-spacing применяется к встроенному содержимому.
| Начальное значение | normal |
|---|---|
| Применяется к | Все элементы. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Да. |
| Анимация | Да. Свойство word-spacing анимируется. |
| Версия | CSS1 |
| DOM-синтаксис | object.style.wordSpacing = "40px"; |
Синтаксис
Синтаксис свойства CSS word-spacing
word-spacing: normal | length | initial | inherit;Пример свойства word-spacing со значением "normal":
Пример свойства CSS word-spacing со значением normal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
word-spacing: normal;
}
</style>
</head>
<body>
<h2>Word-spacing property example</h2>
<p class="text">Lorem ipsum is simply dummy text...</p>
</body>
</html>В следующем примере расстояние между словами составляет 20px:
Пример свойства word-spacing, указанного в "px":
Пример свойства CSS word-spacing со значением длины (px)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
word-spacing: 20px;
}
</style>
</head>
<body>
<h2>Word-spacing property example</h2>
<p class="text">Lorem ipsum is simply dummy text...</p>
</body>
</html>Результат
Значения
| Значение | Описание | Запустить |
|---|---|---|
| normal | Устанавливает нормальное расстояние между словами. Это значение по умолчанию для данного свойства. | Запустить » |
| length | Устанавливает дополнительное расстояние между словами. Может быть указано в px, pt, cm, em и т. д. Допускаются отрицательные значения. | Запустить » |
| initial | Заставляет свойство использовать значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Practice
Что делает свойство CSS 'word-spacing'?