CSS word-spacing — відстань між словами

CSS властивість word-spacing збільшує або зменшує відступ (інтервал) між словами в тексті.

На рисунку зображений блок для якого задана властивість word-spacing: 1.5em;.

Робота word-spacing полягає у визначенні додаткового простору між кожним словом. Наприклад, значення 0 не має ефекту (застосовується нормальний інтервал). Позитивні значення збільшують інтервал і негативні значення зменшують відстань.

Також див. letter-spacing для налаштування інтервалу між кожною буквою.

правити

Загальний опис

правити

Нотатка

Від'ємні значення дозволені.

автор: Svitlana правити

Нотатка

Якщо для тексту задано вирівнювання через text-align: justify (вирівнювання по ширині) - властивість word-spacing буде проігноровано, але відстань між словами буде не меншою значення вказаного через властивість word-spacing.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

word-spacing: normal|length|initial|inherit;

Властивість word-spacing може отримувати 4 значень:

normal

Встановлює звичайний (0.25em) інтервал між словами.

автор: Svitlana

правити

length

Визначає інтервал між словами (в px, pt, cm, em і т.п.). Від'ємні значення дозволяються.

автор: Svitlana

правити

initial

Встановлює цю властивість в значення без задання

автор: Svitlana

правити

inherit

Успадкує значення властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	3.5	12	6

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<p class="wide">Проміжки між цими словами широкі.</p>
<p>Звичайні проміжки для порівняння.</p>

.wide {
    word-spacing: 30px;
}

<p>Вибери потрібне значення для <code>word-spacing</code>:</p>

<input type="number" value="0" id="field"></input>

<div id="block">Привіт, я рядочок тексту :)</div>

body {
    padding: 36px;
  text-align: center;
  line-height: 1.45;
  font-size: 20px;
  font-family: sans-serif;
}

#field {
  padding: 8px;
}

#block {
  border-radius: 4px;
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .45);
  padding: 36px;
  text-align: center;
  background: gold;
  margin: 36px auto 0 auto;
  transition: letter-spacing .15s ease-in 0s;
  wordSpacing: 0;
}

var block = document.getElementById('block');

document.getElementById('field').onchange = function () {
  block.style.wordSpacing = this.value + 'px';
};
//# sourceURL=pen.js

<p>Проміжки між словами тут звичайні, без добавки.</p>

<p class="wide">Проміжки між словами тут звичайні, без добавки.</p>

<p class="tight">Проміжки між словами тут звичайні, без добавки.</p>

<p class="justified">Проміжки між словами тут звичайні, без добавки, але рядок вирівняно по ширині, і браузер розсуває їх сам.</p>

body {
  font-family: sans-serif;
  font-size: 20px;
  padding: 16px;
}

p {
  width: 320px;
  margin: 0 0 14px;
}

.wide {
  word-spacing: 0.5em;
}

.tight {
  word-spacing: -0.15em;
}

.justified {
  word-spacing: 0.5em;
  text-align: justify;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

p { 
  font-family: sans-serif;
  font-size: 1.5em;
  color: #222;
  word-spacing: 1.5em;
}