Укрощаем длинный текст средствами HTML и CSS

Перенос длинных слов

Проблема переноса длинных слов встречается не так редко, как может показаться. Если не брать во внимание слова-рекордсмены вроде “метилпропенилендигидроксициннаменилакрилической кислоты”, порой в установленные макетом страницы рамки не умещаются менее экзотические слова.

Браузеры по умолчанию не разбивают длинные слова на несколько строк. Перенос на новую строку происходит только там, где стоит дефис, пробел или Enter (исключение составляют неразрывный пробел   и неразрывный дефис ‑). При некоторых условиях может появиться ползунок горизонтальной прокрутки, но чаще всего слово выйдёт за границы отведённого ему блока.

Немного иначе ведут себя flexbox элементы и таблицы, они игнорируют установленную ширину и всегда растягиваются настолько, чтобы вместить текст целиком. В примере ниже flex-контейнеру было задано ограничение по ширине (width: 300px;), однако видно, что в зависимости от контента блок может занимать больше места. Не самая приятная особенность для верстальщика, уверенного, что в его макете всё рассчитано до пикселя.

Перенос слов средствами HTML

Как говорилось выше, по умолчанию браузер не переносит слова на несколько строк. Отчасти потому, что он может не знать, как это сделать грамотно.

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

В HTML5 появился тег <wbr/>, обладающий схожим эффектом, однако он не добавляет символ переноса в месте разрыва слова, что выглядит уже не так красиво.

<html>
  <head>
    <style>
      .card {
        width: 200px;
        height: 250px;
        background: #7cd4ae;
        padding: 10px;
        display: inline-block;
        margin: 2em;
      }
    </style>
  </head>

  <body>
    <div class="card">
      <img src="troll.jpg">
      Двухсот&shy;восьмидесяти&shy;восьми&shy;киллограммовый тролль
    </div>
    <div class="card">
      <img src="troll.jpg">
      Двухсот<wbr/>восьмидесяти<wbr/>восьми<wbr/>киллограммовый тролль
    </div>
  </body>
</html>

 

 

Перенос слов средствами CSS

В CSS есть несколько свойств, влияющих на перенос текста.

  • overflow-wrap (word-wrap) - управляет переносом длинных слов (normal - не переносить, если перенос не задан явно, break-word - принудительно переносить).
  • word-break - управляет переносом длинных слов (normal - не переносить, если перенос не задан явно, break-all - принудительно переносить, keep-all - не переносить, даже если слово содержит дефис).
  • hyphens - автоматический перенос слов, основанный на встроенном в браузер словаре переносов (none - не переносить, auto - переносить длинные слова).

Название word-wrap является устаревшим, но сохраняется для совместимости со старыми версиями браузеров.

Свойства word-wrap и word-break на первый взгляд делают одно и то же, но есть небольшие отличия. Word-wrap считается более общим, тогда как word-break предусматривает специальное поведение для китайского, японского и корейского языков. Word-wrap начинает не поместившееся слово с новой строки, а word-break нет. Однако word-break является более приоритетным по отношению к word-wrap.

Свойство hyphens является наиболее мощным и удобным, но его поддержка браузерами пока не идеальна. Плюс оно требует обязательного указания языка в атрибуте lang тега (например, lang="ru").

<html>
  <head>
    <style>
      .description {
        width: 100px;
        background: #7cd4ae;
        word-wrap: break-word;
        word-break: break-all; /* более приоритетно */
      }
    </style>
  </head>

  <body>
    <div class="description" lang="ru">
      Верховный суд Лос-Анджелеса решит судьбу огромнейшего трёхсотвосьмидесятикилограммового изумруда
    </div>
  </body>
</html>

 

Вперед