Свойство CSS `word-spacing`

Свойство word-spacing CSS задаёт расстояние между словами и тегами.

Попробуйте

word-spacing: normal;

word-spacing: 1rem;

word-spacing: 4px;

word-spacing: 50%;

word-spacing: -0.4ch;

<section id="default-example">
  <p id="example-element">
    As much mud in the streets as if the waters had but newly retired from the
    face of the earth, and it would not be wonderful to meet a Megalosaurus,
    forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

@font-face {
  src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.woff2");
  font-family: "Amstelvar";
  font-style: normal;
}

section {
  font-size: 1.2em;
  font-family: "Amstelvar", serif;
}

Синтаксис

/* Keyword value */
word-spacing: normal;

/* <length> values */
word-spacing: 3px;
word-spacing: 0.3em;
word-spacing: 65%;
word-spacing: -1ex;

/* Global values */
word-spacing: inherit;
word-spacing: initial;
word-spacing: revert;
word-spacing: revert-layer;
word-spacing: unset;

Значения

Это свойство задаётся ключевым словом normal или значением типа <length-percentage>:

normal

Обычный интервал между словами, определяемый текущим шрифтом и/или браузером.

<length-percentage>

Задаёт дополнительный интервал в дополнение к внутреннему интервалу между словами, определяемому шрифтом. Процентные значения рассчитываются относительно font-size текста.

Доступность

Большое положительное или отрицательное значение word-spacing сделает предложения, к которым применён этот стиль, нечитаемыми. При очень большом положительном значении слова будут расположены так далеко друг от друга, что текст перестанет восприниматься как предложение. При большом отрицательном значении слова могут перекрывать друг друга настолько, что начало и конец каждого слова станут неразличимыми.

Читаемые значения word-spacing необходимо подбирать индивидуально, поскольку ширина символов различается у разных семейств шрифтов. Не существует единого значения, которое гарантировало бы автоматическое сохранение читаемости для всех семейств шрифтов.

• MDN: пояснения к руководству WCAG, рекомендация 1.4

• [Понимание критерия успеха 1.4.8

  W3C: понимание WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)

Примеры

Основное использование

В этом примере показано основное использование word-spacing.

HTML

Наш HTML содержит два текстовых абзаца:

<p id="mozdiv1">Lorem ipsum dolor sit amet.</p>
<p id="mozdiv2">Lorem ipsum dolor sit amet.</p>

CSS

В нашем CSS к каждому абзацу применяется своё значение word-spacing:

#mozdiv1 {
  word-spacing: 15px;
}

#mozdiv2 {
  word-spacing: 5em;
}

Результат

Пример отображается следующим образом:

Сравнение значений word-spacing, заданных длиной и процентом

В этом примере показано, что процентные значения word-spacing полезны для адаптивного изменения размера текста.

Код отображает несколько абзацев, для текста в которых задано одинаковое значение word-spacing, а размер шрифта постепенно увеличивается. Мы добавили возможность переключаться между значениями word-spacing, заданными длиной и процентом, чтобы вы могли оценить адаптивные свойства процентного значения.

HTML

HTML содержит несколько элементов <p> с текстовым содержимым и элемент <input type="checkbox">, который мы используем для переключения между значением word-spacing, заданным длиной, и значением word-spacing, заданным процентом.

<p class="x-small">X-small font-size (0.8em)</p>
<p class="small">Small font-size (1.3em)</p>
<p class="medium">Medium font-size (2em)</p>
<p class="large">Large font-size (3em)</p>
<p class="x-large">X-Large (3.5em)</p>

<form>
  <label for="ls-toggle">
    Toggle <code>word-spacing</code> (off: <code>10px</code>, on:
    <code>15%</code>)
  </label>
  <input type="checkbox" id="ls-toggle" />
</form>

CSS

В нашем CSS сначала задаются постепенно увеличивающиеся значения font-size для каждого следующего абзаца:

html {
  font-family: "Arial", sans-serif;
}

.x-small {
  font-size: 0.8em;
}

.small {
  font-size: 1.3em;
}

.medium {
  font-size: 2em;
}

.large {
  font-size: 3em;
}

.x-large {
  font-size: 3.5em;
}

По умолчанию ко всем абзацам применяется значение word-spacing, равное 10px. Однако при установленном флажке значение word-spacing меняется на 15%:

p {
  word-spacing: 10px;
}

p:has(~ form > input:checked) {
  word-spacing: 15%;
}

Результат

Результат отображается следующим образом:

Обратите внимание: начальное значение межбуквенного интервала, заданное длиной, выглядит нормально при применении к крупному шрифту, но плохо смотрится при меньшем размере. Теперь установите флажок и посмотрите, как процентный межбуквенный интервал выглядит уместно во всех строках, поскольку он масштабируется вместе с размером шрифта.

Формальное определение

Формальный синтаксис

word-spacing = 
  normal |
  <length>

Спецификации

Совместимость с браузерами

См. также

• letter-spacing
• Атрибут word-spacing в SVG