Переносы слов в HTML: почему мы выбираем ручные подсказки

Как настроить переносы и добавить подсказку

Задайте правила в CSS

За переносы слов отвечает CSS-свойство hyphens. Мы задаём hyphens: manual: браузер использует добавленные редактором подсказки и не выбирает места переноса автоматически. Это исходное значение свойства, но стили сайта могут его переопределить. При hyphens: none ручные подсказки не сработают. Эти режимы описаны в спецификации CSS Text.

В обычном тексте дополнительно разрешаем аварийный разрыв слишком длинной строки. У таблиц оставляем переносы по словам и ручным подсказкам, а если ширины всё равно не хватает — горизонтальную прокрутку:

/* Обычный текст статьи. */
.article-text {
  hyphens: manual;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}

/* Таблица внутри прокручиваемой обёртки. */
.table-responsive { overflow-x: auto; }
.table-responsive table {
  hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
  white-space: normal;
}
.table-responsive th { white-space: normal; }

В этом примере .article-text — область текста статьи, .table-responsive — обёртка вокруг таблицы. На своём сайте используйте соответствующие селекторы.

overflow-wrap: break-word защищает обычный текст от слишком длинных слов и адресов; у таблицы overflow-wrap: normal сохраняет ширину неразрывных частей слов. word-break: normal отменяет произвольное дробление слов, а white-space: normal разрешает перенос строк, в том числе в заголовках таблицы.

Отметьте место переноса в HTML

Ручной перенос означает, что место разрыва выбирает редактор. Для этого внутрь слова вставляют мягкий перенос — невидимый символ, который в HTML записывают как ­:

<td>…специали&shy;зированные парафиновые масла.</td>

Здесь слово можно перенести после «специали». Если браузер использует подсказку, в конце строки появится дефис; если слово помещается, подсказка останется невидимой. Добавляйте ­ в режиме редактирования HTML только там, где конкретное слово мешает набору, и выбирайте допустимое для языка место разрыва.

После сохранения проверьте страницу на узком и широком экране, затем увеличьте размер текста. Слово должно оставаться читаемым, а содержимое широкой таблицы — доступным при прокрутке. Дальше разберём действие этих настроек на одном слове, таблице и обычном абзаце.

Как работает подсказка переноса

В слове специали­зированные подсказка стоит после «специали». В узкой области видно, как она работает:

Четыре совета при добавлении ручных переносов:

1. Не заменяйте мягкий перенос обычным дефисом. Дефис останется видимым, даже когда слово целиком помещается в строке.
2. Не вставляйте <br> внутрь слова. Он принудительно начинает новую строку. Такая подгонка под один экран будет мешать на другом.
3. Выбирайте место разрыва по правилам языка. Если допустимость переноса вызывает сомнение, проверьте её или измените формулировку.
4. Проверяйте результат после сохранения. Визуальный редактор может показать запись ­ как обычные символы, удалить её или преобразовать в мягкий перенос. Откройте страницу и проверьте узкий и широкий экран.

Как переносы меняют ширину таблицы

В блоге Прокраса мы заметили таблицу, которая почти помещалась на экране телефона, но читать её было неудобно: столбцы сжались, слова дробились, а строки данных стали очень высокими. Горизонтальная прокрутка работала. Причина оказалась в автоматических переносах: они давали браузеру больше мест для разрыва слов и позволяли сильнее сузить столбцы.

Ниже — две строки исходной таблицы. В первом варианте включены автоматические переносы, во втором слова остаются целыми. Текст, ширина области и остальные условия одинаковы. Это воспроизведение механизма на оформлении CTR99; конкретные разрывы зависят от браузера и его словаря русского языка.

Полностью запретить деление слов тоже не всегда удобно: одно длинное слово может растянуть весь столбец. Ручная подсказка позволяет разделить именно это слово и сохранить остальные целыми. Посмотрим, как это влияет на ширину столбца.

Как ручной перенос меняет ширину столбца

У таблицы есть не только общая ширина, но и ограничения отдельных столбцов. Если слово нельзя разделить, браузеру приходится оставить под него достаточно места. Вместе с этим словом расширяется весь столбец, хотя остальной текст мог бы занимать меньшую ширину.

Ниже — фрагмент таблицы выбора покрытия для имитации бруса: две последние строки и столбцы «Рекомендуемый состав» и «Эксплуатационный маркер». Текст взят из той же статьи Прокраса. Здесь сравниваем оформление одного и того же текста.

В обоих вариантах одинаковые данные, шрифт, ширина области и правила таблицы. В варианте «С ручным переносом» добавлена только одна подсказка: специали­зированные. Найдите выделенную ячейку и сравните ширину первого столбца. Если таблица не помещается, над ней появляются кнопки со стрелками: ими можно прокрутить её в обе стороны. Жесты прокрутки также работают.

На широкой области места может хватить обоим вариантам, и заметного отличия не будет. Это нормально: мягкий перенос разрешает разделить слово, но не требует делать это при любой ширине.

Техническое объяснение даёт спецификация CSS Text: допустимые точки переноса учитываются при расчёте минимальной ширины содержимого. Поэтому подсказка может повлиять на ширину столбца ещё до выбора конкретного места разрыва строки.

Два совета при работе с таблицей:

1. Начните со слова, которое мешает вёрстке. Добавьте подсказку и проверьте результат. Расставлять переносы во всех длинных словах не нужно.
2. Сохраняйте прокрутку широкой таблицы. Несколько содержательных столбцов не обязаны целиком помещаться на экране телефона даже после добавления подсказок.

Почему не разрешить браузеру переносить всё

У автоматических переносов есть своя задача. Мэтью Баттерик связывает их полезность с выравниванием и длиной строки: для набора по ширине считает необходимыми, а для выравнивания влево — необязательными. В узких строках у текста меньше удобных мест разрыва, поэтому переносы могут помочь.

Руководство College Board предлагает избегать переносов в тексте с неровным правым краем, допуская их для длинных слов, из-за которых иначе остаются слишком короткие строки. Это редакционная позиция конкретного руководства, а не универсальный запрет.

В наших проектах мы выбираем целые слова и точечные подсказки. В обычном абзаце так сохраняется привычное написание, а в таблице редактор может исправить конкретное слово, растягивающее столбец. Автоматические переносы оставляют выбор мест браузеру. Они могут сделать таблицу компактнее, но вместе с этим — разделить много слов и позволить столбцам сильнее сжаться. Такой результат нужно оценивать по всей таблице, а не только по её общей ширине.

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

hyphens: none запрещает деление слов по подсказкам переноса. hyphens: manual разрешает его в заданных местах; без подсказок два варианта часто выглядят одинаково. hyphens: auto использует правила языка и доступный браузеру словарь. Для русскоязычного примера указан lang="ru", но одинаковые разрывы во всех браузерах не гарантируются. Эти различия описаны в MDN.

Длинная строка требует отдельной страховки

У URL или технического идентификатора может не быть удобных мест переноса. Даже обычное слово с подсказкой иногда не помещается: при крупном шрифте слишком длинным оказывается фрагмент между двумя разрешёнными точками.

Для обычного текста используем дополнительную защиту overflow-wrap: break-word. Если неразрывная часть не помещается целиком, браузер может разделить её без дефиса. Это аварийная мера, а не автоматический подбор языково правильных переносов. MDN объясняет, что такой разрыв нужен именно для предотвращения переполнения.

Для адреса можно также указать точку разрыва с помощью <wbr>. В отличие от мягкого переноса, этот элемент не добавляет дефис. Подсказка в видимом тексте ссылки не требует менять адрес в href:

<a href="https://example.org/catalog/example">
  https://example.org/<wbr>catalog/<wbr>example
</a>

Ещё два технических способа полезно отличать от нашего выбора. overflow-wrap: anywhere допускает аварийные разрывы и учитывает их при расчёте минимальной ширины. word-break: break-all разрешает разрывы между символами: слово может разделиться в остатке строки, даже если целиком поместилось бы на следующей. Дефис при этом не добавляется.

Поэтому настройки обычного текста нельзя без проверки переносить на таблицы. Для них мы сохраняем ручные подсказки и возможность горизонтальной прокрутки. Цель — удобные столбцы и читаемые слова, а не максимальное сжатие таблицы.

Таблицы и абзацы занимают всю доступную ширину примера. Для сравнения одного слова специально оставлена узкая область. Можно увеличить размер текста: он меняется одновременно во всех вариантах одного сравнения. Если после увеличения даже часть слова между подсказками не помещается, потребуется больше места или защита длинной строки.

Как проверить результат

После добавления подсказки проверьте:

1. На широкой строке внутри слова не появился постоянный дефис.
2. На узком экране слово делится в допустимом месте, а столбец не растягивается без необходимости.
3. При увеличенном тексте содержание остаётся доступным: длинная строка защищена, широкую таблицу можно прокрутить.
4. На компьютере и телефоне читается вся таблица, а не только исправленная ячейка.

Ручной перенос решает локальную проблему. Его стоит добавлять после просмотра страницы, когда понятно, какое слово мешает и что изменится от подсказки.