word-spacing¶
Свойство word-spacing устанавливает интервал между словами.
Если для текста задано выравнивание через text-align со значением justify (выравнивание по ширине), то интервал между словами будет установлен принудительно, но не меньше значения, указанного через word-spacing .
Демо¶
- letter-spacing
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-style
- text-decoration-thickness
- text-decoration-skip
- text-decoration-skip-ink
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-indent
- text-rendering
- text-shadow
- text-underline-position
- text-transform
- white-space
- word-spacing
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
/* Keyword value */ word-spacing: normal; /* values */ word-spacing: 3px; word-spacing: 0.3em; /* values */ word-spacing: 50%; word-spacing: 200%; /* Global values */ word-spacing: inherit; word-spacing: initial; word-spacing: unset; Значения¶
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение может быть и отрицательным, но следует проверять работоспособность в разных браузерах. Процентная запись не применима.
normal Устанавливает интервал между словами как обычно.
Значение по-умолчанию: normal
Применяется ко всем элементам
Спецификации¶
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
html> head> meta charset="utf-8" /> title>word-spacingtitle> style> .tel word-spacing: 10px; font-size: 2em; > style> head> body> p class="tel">Тел.: 555-221-061p> body> html> Пробелы между словами
Особенность языка HTML такова, что любое количество пробелов между словами будет показано как один. Но иногда у разработчика сайта возникает необходимость изменить расстояние между словами текста, в частности, увеличить.
Известно, что размер шрифта меняется с помощью тега FONT или с использованием стилей. Может возникнуть идея установить пробел большего размера, используя, например, подобную конструкцию: Обещаем/span>обещать не обещать! Выглядит это, во-первых, очень громоздко, а во-вторых, размер пробела меняется не только по горизонтали, но и по вертикали. Поэтому строка будет смещена от своей базовой линии. Для более изящного решения задачи можно порекомендовать следующие способы.
Использование неразделяемого пробела
Символ используется во многих случаях. Полюбился он за то, что независимо от каких-либо условий, всегда устанавливает пробел. Так что можно поставить подряд хоть с десяток таких пробелов, браузер покажет их все. Хотя слово в данном случае не совсем верно, пробел все-таки никак не видно (пример 1). Пример 1. Использование символа Я за вас свою работу выполнять не буду! В примере создана красная строка из четырех пробелов: один обычный и три с помощью символа . Размер такого пробела совпадает с размером базового шрифта. Использование неразделяемого пробела сопряжено с определенными неудобствами. Представьте, что необходимо изменить расстояние между словами во всех текстах на сайте. Слишком много работы предстоит выполнить впустую. Поэтому наиболее приемлемым способом изменения пробелов между словами, является применение стилей.
Использование таблиц стилей
Чтобы задать расстояние между словами в тексте, используется параметр word-spacing. Его значение может быть установлено в пикселах (px), пунктах (pt), миллиметрах (mm) и других единицах (пример 2). Пример 2. Использование атрибута word-spacing Слон + хорошая пища = два слона Преимущество последнего указанного подхода в его удобстве и централизованности. Стиль можно описать один раз в глобальной таблице стилей и применять его к нужным элементам веб-страницы (пример 3). Пример 3. Использование Таблиц стилей
-Булочку надо?
-Спасибо, не надо!
-Не надо?! Спасибо!