Перенос текста и разрыв слов в 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>

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

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

Тег <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> текст переносится с большим разрывом в строке:

Добавив <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>

В заключение

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