Свойство CSS word-spacing
Свойство CSS word-spacing задаёт расстояние между словами в тексте. Узнайте о значениях свойства и попробуйте примеры.
Свойство CSS word-spacing управляет величиной пробела между словами в тексте. Оно добавляет (или вычитает) значение к стандартному промежутку, который шрифт уже устанавливает после каждого пробельного символа, — то есть регулирует расстояние между словами, а не между отдельными буквами. Для управления расстоянием между буквами используйте letter-spacing.
На этой странице рассматриваются синтаксис, все допустимые значения, поведение положительных и отрицательных длин, применяемые единицы измерения, соображения доступности и примеры с возможностью запуска.
Принцип работы
Браузер берёт за основу промежуток между словами, заданный шрифтом. Указанное вами значение word-spacing прибавляется к этому базовому значению:
- Положительное значение увеличивает расстояние между словами.
- Отрицательное значение сближает слова (и при достаточно большой величине может их перекрыть).
- Ключевое слово
normalсбрасывает интервал до значения шрифта по умолчанию — оно эквивалентно0, но является начальным значением свойства, а не буквальной длиной.
Поскольку word-spacing воздействует на промежутки, создаваемые пробельными символами, оно применяется только к строчному содержимому. Свойство также наследуется: установив его на контейнере, вы применяете его ко всем вложенным текстам, если дочерний элемент не переопределит его.
Когда стоит использовать?
- Читаемость — небольшое увеличение промежутков между словами может облегчить восприятие плотных или заглавных заголовков.
- Отображаемый тип — «разряженный» стиль заголовка в логотипном оформлении для нарочито воздушного вида.
- Уплотнение — небольшое отрицательное значение позволяет сэкономить место в ограниченном макете, хотя применяйте это приём осторожно.
Для основного текста страницы оставляйте значение normal; большие интервалы между словами замедляют чтение, а не облегчают его.
Свойство word-spacing поддерживает анимацию, поэтому его можно плавно изменять с помощью свойства transition.
word-spacing применяется только к строчному содержимому. Для управления расстоянием между буквами используйте letter-spacing; для управления пробелами, создаваемыми пробельными символами, — white-space.
| Начальное значение | 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>Результат
Пример отрицательного значения word-spacing:
Отрицательная длина сближает слова. В данном примере промежуток уменьшается на 3px:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
word-spacing: -3px;
}
</style>
</head>
<body>
<h2>Negative word-spacing example</h2>
<p class="text">Lorem ipsum is simply dummy text of the printing industry.</p>
</body>
</html>Единицы измерения
Значение length принимает любую единицу длины CSS:
- Абсолютные —
px,pt,cm. Фиксированы независимо от размера шрифта. - Относительные —
emиrem. Значение вemмасштабируется вместе сfont-sizeэлемента, поэтомуword-spacing: 0.25emсохраняет пропорции при изменении размера текста. Обычно это более надёжный выбор для адаптивной типографики. Значения в процентах не допускаются.
Доступность
Согласно WCAG 1.4.12 (Text Spacing), пользователи могут переопределять межсловный интервал до значения не менее 0.16em для удобства чтения. Избегайте жёстко заданных больших значений в пикселях, препятствующих переносу текста, и никогда не используйте только межсловный интервал для передачи смысла. Чрезмерный интервал также может разрушать восприятие текста для пользователей с когнитивными или зрительными нарушениями, поэтому для основного текста используйте небольшие корректировки.
Значения
| Значение | Описание | Попробовать |
|---|---|---|
| normal | Задаёт стандартный межсловный интервал. Это значение по умолчанию для данного свойства. | Попробовать » |
| length | Задаёт дополнительный межсловный интервал. Можно указать в px, pt, cm, em и т. д. Допускаются отрицательные значения. | Попробовать » |
| initial | Устанавливает для свойства его значение по умолчанию. | Попробовать » |
| inherit | Наследует значение свойства от родительского элемента. |