Свойство word-spacing устанавливает интервал между словами. Допустимо отрицательное значение, в процентах задавать нельзя.

Если для текста задано выравнивание через text-align: justify, то интервал между словами будет установлен автоматически, но не меньше значения, указанного через word-spacing.

Синтаксис

селектор {
	word-spacing: CSS единицы (кроме %) | normal | inherit
}

Значения

Значение Описание
CSS единицы Устанавливает заданный интервал между словами (размер пробела между ними) в заданных единицах (кроме %).
normal Позволяет браузеру вычислять интервал между словами самостоятельно.
inherit Наследует значение родителя.

По умолчанию браузер выбирает интервал автоматически (normal).

Примеры

Пример

Давайте поставим расстояние между словами в 30px:

p {
	word-spacing: 30px;
	text-align: left; 
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

А теперь расстояние между словами оставим таким же, но поставим text-align в значение justify - в этом случае отступы могут отличаться от установленных:

p {
	word-spacing: 30px;
	text-align: justify; 
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

Установим word-spacing в отрицательное значение - расстояние между словами практически исчезнет:

p {
	word-spacing: -7px;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

Установка данного свойства в ноль не приводит к сливанию слов:

p {
	word-spacing: 0;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

Установим word-spacing в значение normal (это значение по умолчанию):

p {
	word-spacing: normal;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.