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

Как изменить расстояние между строками текста?

Для управления межстрочным расстоянием (оно еще называется интерлиньяжем) применяется стилевое свойство line-height . В качестве значения обычно указывается число, которое определяет межстрочный интервал. Например, line-height : 2 устанавливает двойной интервал, а line-height : 1.5 — полуторный (пример 1).

Пример 1. Интерлиньяж в тексте

HTML5 CSS 2.1 IE Cr Op Sa Fx

     p.dline < line-height: 1.5; >P  
Данный термин переводится как «печенье», но поскольку это название лишь сбивает с толку, его оставляют без перевода. Cookie можно использовать для сохранения даты последнего посещения читателя, паролей, а также любой информации о действиях посетителя на сайте. Подобное применение позволяет персонализировать сайт и сделать его более удобным для посетителей.
  

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

Рис. 1. Вид текста при разном межстрочном расстоянии

Значение line-height допустимо задавать и в других единицах CSS, например, пикселах (px), процентах (%) и др. В данном примере для первого абзаца установлен полуторный интерлиньяж, а для второго — межстрочное расстояние равно 0.9em .

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

• Как добавить картинку на веб-страницу?
• Как добавить иконку сайта в адресную строку браузера?
• Как добавить фоновый рисунок на веб-страницу?
• Как сделать обтекание картинки текстом?
• Как растянуть фон на всю ширину окна?
• Как выровнять фотографию по центру веб-страницы?
• Как разместить элементы списка горизонтально?
• Как убрать подчеркивание у ссылок?
• Как убрать маркеры в маркированном списке?
• Как изменить расстояние между строками текста?
• Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
• Как открыть ссылку в новом окне?

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

Особенность языка HTML такова, что любое количество пробелов между словами будет показано как один. Но иногда у разработчика сайта возникает необходимость изменить расстояние между словами текста, в частности, увеличить.

Известно, что размер шрифта меняется с помощью тега FONT или с использованием стилей. Может возникнуть идея установить пробел большего размера, используя, например, подобную конструкцию: Обещаем/span>обещать не обещать! Выглядит это, во-первых, очень громоздко, а во-вторых, размер пробела меняется не только по горизонтали, но и по вертикали. Поэтому строка будет смещена от своей базовой линии. Для более изящного решения задачи можно порекомендовать следующие способы.

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

Символ используется во многих случаях. Полюбился он за то, что независимо от каких-либо условий, всегда устанавливает пробел. Так что можно поставить подряд хоть с десяток таких пробелов, браузер покажет их все. Хотя слово в данном случае не совсем верно, пробел все-таки никак не видно (пример 1). Пример 1. Использование символа      Я за вас свою работу выполнять не буду! В примере создана красная строка из четырех пробелов: один обычный и три с помощью символа   . Размер такого пробела совпадает с размером базового шрифта. Использование неразделяемого пробела сопряжено с определенными неудобствами. Представьте, что необходимо изменить расстояние между словами во всех текстах на сайте. Слишком много работы предстоит выполнить впустую. Поэтому наиболее приемлемым способом изменения пробелов между словами, является применение стилей.

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

Чтобы задать расстояние между словами в тексте, используется параметр word-spacing. Его значение может быть установлено в пикселах (px), пунктах (pt), миллиметрах (mm) и других единицах (пример 2). Пример 2. Использование атрибута word-spacing Слон + хорошая пища = два слона Преимущество последнего указанного подхода в его удобстве и централизованности. Стиль можно описать один раз в глобальной таблице стилей и применять его к нужным элементам веб-страницы (пример 3). Пример 3. Использование Таблиц стилей

-Булочку надо?

-Спасибо, не надо!

-Не надо?! Спасибо!

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

Промежуток между словами

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

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

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

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

«слово в слово про слово»

Изменить это поведение можно с помощью свойства white-space . У тега по умолчанию white-space имеет значение pre и моноширинный шрифт.

Отступ/выступ первой строки в абзаце можно установить с помощью свойства text-indent .

Те же правила и свойства CSS распространяются и на inline и inline-block элементы [подробнее]. Например, « слово в слово про слово » .

 span «слово в слово про слово»

Как убрать расстояние между inline-block элементами

Вариант 1. Удалить символ пробела

Вариант 2. Задать отрицательное значение word-spacing родительскому элементу

Как настроить интервал между inline-block элементами

1. 1
2. 2
3. 3
4. 4
5. 5

1. 1
2. 2
3. 3
4. 4
5. 5

• letter-spacing : промежуток между буквами
• word-wrap : перенос слов на следующую строку

Межсимвольный, межстрочный интервал CSS. Расстояние между словами

Работая со стилем для текста, вы можете устанавливать необходимые расстояния между символами, словами и строками. Задаются такие расстояния в любых единицах измерения CSS, будь-то px , pt , em или другое. Исключением являются проценты – с их помощью можно задать расстояние между строками (интерлиньяж), но они не работают при установке интервала между символами или словами.

Межсимвольный интервал CSS: letter-spacing

Задать межсимвольный интервал можно с помощью свойства CSS letter-spacing. Помимо обычных значений (положительных и отрицательных) также можно использовать значения inherit (чтобы наследовать значение у родителя) и normal (если необходимо вернуть нормальное расстояние между символами).

Пример записи межсимвольного интервала:

Интервал между словами: word-spacing

Свойство CSS word-spacing отличается от предыдущего тем, что устанавливает расстояние между словами, а не между символами. Для данного свойства тоже предусмотрены значения normal и inherit . Можно задавать отрицательные значения. Ниже показан пример записи стиля:

Межстрочный интервал: line-height

С помощью свойства CSS line-height можно задавать расстояние между строками текста. Как было сказано в начале темы, для установки интерлиньяжа, помимо других единиц измерения, допускается использовать проценты. Также разрешено записывать значение в виде множителя (числа больше 0): для вычисления расстояния браузер умножит размер шрифта на заданное число. Отрицательные значения не работают. Доступны значения normal и inherit .

Ниже – пример, как сделать межстрочный интервал CSS:

На скриншоте можно увидеть, как выглядит текст со всеми тремя свойствами:

Итоги

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