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

Изменение расстояния между словами в текстах веб-страниц не такая тривиальная задача, как могло бы показаться. Два, три или больше поставленных подряд пробела между соседними словами, согласно стандартам языка HTML, никак не отразятся на расстоянии между ними - браузер будет отображать их как одинарный пробел. Но, конечно, инструменты для решения этой задачи есть.

Инструкция

Один из вариантов - использовать специальный символ языка HTML, который называется «неразрывный пробел» (non-breakable-space). Отображается он так же, как и обычный пробел, а особенность заключается в том, что если два слова разделить таким спецпробелом, то браузер будет считать, что это одно слитное слово, разделять которое нельзя. В силу этой особенности браузер не будет вмешиваться и в отображение нескольких таких пробелов, поставленных подряд, т.е. не будет заменять несколько пробелов одним. Обозначается этот спецзнак таким набором символов: "&nbsр;" (без кавычек). Выглядеть в исходном коде документа параграф текста со словами, разделенными такими спецсимволами, может так:

Это образец&nbsр;&nbsр;параграфа&nbsр;&nbsр;&nbsр;текста.

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

Намного чаще используется управление расстоянием между словами с применением языка описания стилей (CSS). На языке CSS соответствующая дефиниция может выглядеть, например, так:word-spacing: 15px;Здесь указан размер пробела между соседними словами в 15 пиксел. Стилевой атрибут можно добавить почти в любой тег. Например, тег параграфа с таким атрибутом, задающим расстояние в 20 пиксел между всеми словами параграфа, может выглядеть так:

Параграф текста с увеличенным расстоянием между словами

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

.dblSpace {word-spacing: 20px}

А тег параграфа со ссылкой на этот класс в теле документа будет, например, таким:

Параграф с широкими интервалами между слвами

Оцените статью!