Расстановка переносов в html тексте на русском языке

В узкой колонке длинные русские слова оставляют большие пробелы или вылезают за край. Браузер может переносить их сам, если знает язык и поддерживает нужный словарь. Начнём с lang и hyphens, а затем разберём мягкий перенос и длинные строки, которые вообще не являются обычными словами.

Начинаем с разметки и CSS

<article lang="ru" class="article-text">Текст статьи</article>
<style>
.article-text { hyphens: auto; overflow-wrap: break-word; }
</style>

hyphens отвечает за переносы слов, а overflow-wrap позволяет разорвать слишком длинный фрагмент, который иначе не помещается. Эти правила не тождественны. Для кода, идентификаторов и адресов часто нужен отдельный стиль: искусственный перенос не должен менять смысл копируемого примера.

Когда нужна ручная подсказка

электро­оборудование

Мягкий перенос задаёт допустимое место разрыва. Он не должен добавляться в каждое слово автоматически без проверки. После вставки проверьте поиск по странице, выделение и копирование. Не используйте видимый дефис как замену: он останется частью текста и там, где переноса нет.

Осторожно со скриптовой обработкой

Иногда переносы пытаются расставить регулярными выражениями прямо в innerHTML. Такой способ может задеть атрибуты, ссылки и фрагменты кода. Если необходима обработка на JavaScript, обходите только подходящие текстовые узлы и исключайте редакторы, pre, code и служебные элементы. Языковые правила сложнее короткого набора регулярных выражений.

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

Источники и дальнейшее чтение

• MDN: hyphens
• MDN: overflow-wrap