Перенос текста и разрыв слов в HTML

HTML-тег <wbr> используется, чтобы указать браузерам, в каком части строки можно без труда осуществить перенос.

Магия HTML

В случае со словом «supercalifragilisticexpialidocious» <wbr> можно без труда добавить между каждым слогом. Пример использования:

<div> <p>The wbr tag is supercalifragilisticexpialidocious! </p> <p> The wbr tag is super<wbr>cali<wbr>fragilistic<wbr>expiali<wbr>docious!</p></div>

При просмотре в браузере, вы увидите, что одно и то же предложение показывается дважды.

Перенос текста и разрыв слов в HTML

Но все волшебство происходит, если уменьшить ширину окна браузера. Тогда вы увидите, что вторая строка переносится более правильно, чем первая:

Перенос текста и разрыв слов в HTML

Тег <wbr> полезен при выведении длинных URL-адресов на веб-страницах. Он указывает места для разрыва URL-адреса. Несмотря на то, что URL будет сам переноситься на некоторых символах пунктуации, все равно лучше контролировать разрывы.

К примеру, не все браузеры будут выполнять перенос на точке в URL. Чтобы избежать этого, можно без проблем добавить <wbr> перед точками в URL-адрес:

<div><ul> <li>If you are looking for an article on IBM Bots, you should read "Using a Free Custom IBM Bot," which can be found at https://www.htmlgoodies.com/beyond/using.a.free.custom.ibm.bot.html.</li></ul></div>

Без <wbr> текст переносится с большим разрывом в строке:

Перенос текста и разрыв слов в HTML

Добавив <wbr> в URL-адрес, можно избавиться от разрыва:

<div><ul> <li>If you are looking for an article on IBM Bots, then you should read "Using a Free Custom IBM Bot", which can be found at https://www<wbr>.htmlgoodies<wbr>.com/beyond/using<wbr>.a<wbr>.free<wbr>.custom<wbr>.ibm<wbr>.bot<wbr>.html.</li></ul></div>
Перенос текста и разрыв слов в HTML

В заключение

Большинство людей не знают о существовании тега <wbr>. Он будет идеальным решением для переноса длинных слов и строк. Но учтите, что Internet Explorer не поддерживает этот тег.

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

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