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

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

  • автор:

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

Между словами используется символ пробела. Положительное значение свойства 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 : перенос слов на следующую строку

Как сделать пробел между словами в html

Для создания пробела между словами в HTML можно использовать несколько способов:

  • Использование символа пробела — простейший способ создания пробела между словами в HTML. Для этого просто добавьте пробел между словами в коде HTML:
 Привет, мир! 
  • Использование символа   — в HTML-коде этот символ представляет собой неразрывный пробел. Он используется в случаях, когда нужно создать пробел между словами, который не может быть разорван переносом строки. Для создания неразрывного пробела между словами в HTML используйте следующий код:
 Привет, мир! 
  • Использование CSS свойства word-spacing — это свойство определяет дополнительное расстояние между словами в тексте. В качестве значения можно использовать любую длину, указывающую на расстояние между словами. Например:
 style="word-spacing: 10px;">Привет мир! 

Межсимвольный, межстрочный интервал 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:

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

Скриншот: пример установки интервалов в CSS

Итоги

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

letter-spacing

Определяет интервал между символами в пределах элемента. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данное свойство. Допустимо использовать отрицательное значение, но в этом случае надо убедиться, что сохраняется читабельность текста.

Синтаксис

letter-spacing: значение | normal | inherit

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Наилучший результат дает использование относительных единиц основанных на размере шрифта (em и ex).

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

HTML5 CSS2.1 IE Cr Op Sa Fx

    letter-spacing p 

Duis te feugifacilisi

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

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

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

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

Объектная модель

[window.]document.getElementById(» elementID «).style.letterSpacing

Браузеры

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *