css властивість word-spacing


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

CSS властивість `word-spacing`

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

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

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

Нотатка:

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

Нотатка:

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

Синтаксис

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

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

normal

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

length

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

initial

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

inherit

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

Значення без задання: normal
Наслідує: Так
Анімується: Так
JavaScript синтаксис: object.style.wordSpacing="20px"

Переглядачі

Переглядач
word-spacing

1.0

6.0

1.0

1.0

3.5

12.0

Переглядач
word-spacing

1.0

1.0

1.0


Мобільних переглядачів ще не додано.

Приклади


Різні значення властивості і їхній вплив на рядок тексту

See the Pen ls-2 by css.in.ua (@css_in_ua) on CodePen.

Простий приклад використання

Відступ між словами буде 30 пікселів.

p { 


  word-spacing: 30px; 


}

Додаткові посилання