Как сделать расстояние между словами в css

Свойство word-spacing

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

Значением свойства служат любые единицы для размеров, кроме процентов. Допустимо отрицательное значение. Значение normal позволяет браузеру вычислять интервал между словами самостоятельно (значение по умолчанию).

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

Синтаксис

Пример

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

Пример

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

Интервалы в CSS

Интервалы в CSS задают расстояния между словами в тексте, между буквами внутри слова (межбуквенный интервал css), а так же управляют высотой строки (межстрочный интервал css). Интервалы можно задавать только при помощи CSS, средствами HTML это невозможно.

Содержание:

Свойство WORD-SPACING

Именно это свойство задает расстояние между словами, значениями являются любые единицы длины, причем, как положительные, так и отрицательные.

А если задать отрицательное значение:

Получим такой результат:

Свойство LETTER-SPACING

При помощи этого свойства задаются расстояния между буквами в словах, значения задаются так же, единицами длины с отрицательными значениями. Свойства WORD-SPACING и LETTER-SPACING можно применять одновременно, так как увеличив интервал между буквами, придется увеличить интервал между словами. Чаще всего эти свойства применяются в заголовках.

Получим такой пример заголовка:

Интервалы в CSS

Свойство LINE-HEIGHT

Это свойство задает межстрочечный интервал, т.е. расстояние между строками текста. В данном свойстве отрицательные величины не используются, а значения можно задавать не только единицами длины, но и процентами. Например, размер выбранного шрифта 12pt (пунктов), а высоту строки сделаем 16pt, то правило запишем:

Это свойство можно задать через слеш (/) от размера шрифта в стенографическом свойстве FONT:

В языке HTML такого свойства нет. А дальше мы перейдем к созданию списков средствами CSS.

Как увеличить расстояние между словами в html

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

Синтаксис

word-spacing: <размер> | normal | inherit

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS &#8212; например, пикселы (px), дюймы (in), пункты (pt) и др. Значение может быть и отрицательным, но следует проверять работоспособность в разных браузерах. Процентная запись не применима.

normal Устанавливает интервал между словами как обычно. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Применение свойства word-spacing

Рис. 1. Применение свойства word-spacing

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Расстояние между словами (свойство word-spacing) | CSS

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

Значение word-spacing в процентах устанавливает дополнительное расстояние между словами в процентах от длины символа пробела. Скоро будет поддерживаться браузерами.

Отступы между inline или inline-block элементами

Если два и более пробела идут подряд и не являются неразрывными, то они показываются как один. Знак переноса на новую строку также является пробельным символом. Например, &#171;слово в слово про слово&#187; в исходном коде выглядит так:

Поведение inline и inline-block элементов то же как и у слов вне тегов, на них распространяются те же правила и свойства CSS [подробнее]. Например, &#171; слово в слово про слово &#187; .

Пробелы между словами

Известно, что размер шрифта меняется с помощью тега FONT или с использованием стилей. Может возникнуть идея установить пробел большего размера, используя, например, подобную конструкцию:

Обещаем<span style="font-size: 150%"< >/span>обещать<span style="font-size: 150%"> </span>не<span style="font-size: 150%"> </span>обещать!

Выглядит это, во-первых, очень громоздко, а во-вторых, размер пробела меняется не только по горизонтали, но и по вертикали. Поэтому строка будет смещена от своей базовой линии.

Для более изящного решения задачи можно порекомендовать следующие способы.

Использование неразделяемого пробела

Символ используется во многих случаях. Полюбился он за то, что независимо от каких-либо условий, всегда устанавливает пробел. Так что можно поставить подряд хоть с десяток таких пробелов, браузер покажет их все. Хотя слово в данном случае не совсем верно, пробел все-таки никак не видно (пример 1).

Пример 1. Использование символа &nbsp;

&nbsp;&nbsp;&nbsp;Я за вас свою работу выполнять не буду!

В примере создана красная строка из четырех пробелов: один обычный и три с помощью символа &nbsp; . Размер такого пробела совпадает с размером базового шрифта.

Использование неразделяемого пробела сопряжено с определенными неудобствами. Представьте, что необходимо изменить расстояние между словами во всех текстах на сайте. Слишком много работы предстоит выполнить впустую. Поэтому наиболее приемлемым способом изменения пробелов между словами, является применение стилей.

Использование таблиц стилей

Чтобы задать расстояние между словами в тексте, используется параметр word-spacing. Его значение может быть установлено в пикселах (px), пунктах (pt), миллиметрах (mm) и других единицах (пример 2).

Пример 2. Использование атрибута word-spacing

<span style="word-spacing: 10px">Слон + хорошая пища = два слона</span></code>

Преимущество последнего указанного подхода в его удобстве и централизованности. Стиль можно описать один раз в глобальной таблице стилей и применять его к нужным элементам веб-страницы (пример 3).

Пример 3. Использование Таблиц стилей

Заметьте, что перед началом строки никаких отступов не добавляется, для создания абзаца следует использовать параметр text-indent. 2020-12-23

Добавить комментарий

Ваш адрес email не будет опубликован.