Умнее сломать слово в CSS?

Если я просто положил word-break: break-all на элемент, я часто получаю следующее:

Привет, люди, я печатаю mes
шалфей, который слишком долго подходит!

Очевидно, это было бы намного лучше:

Привет, люди, я набираю текст сообщение, которое слишком долго подходит!

Но в то же время, если кто-то пишет:

BLAAAAAAAAARRRRRRRRRRRRGGGGGGGGHHHHHHHH!!!!!!

Тогда я бы хотел, чтобы это было:

BLAAAAAAAAARRRRRRRRRRR
RGGGGGGGGHHHHHHHH!!!!!!

Кажется, я не могу найти способ сделать это.

Обратите внимание, что ширина элемента не является фиксированной и может меняться.

Ответ 1

Попробуйте word-wrap: break-word;, он должен вести себя так, как вы ожидаете.

Ответ 2

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

В CSS вы можете использовать hyphens: auto, хотя вам в основном по-прежнему нужно дублировать его с использованием префиксов поставщиков. Поскольку это не работает в IE 9, вы можете вместо этого использовать перенос на основе JavaScript, например Hyphenate.js. В обоих случаях важно использовать разметку языка (атрибут lang).

Разрыв длинных неотрицаемых строк - это другая проблема. Лучше всего их обрабатывать при предварительной обработке, но в простой настройке word-break: break-word (что означает неправильное разбиение слов, например, на английском языке) можно считать чрезвычайной ситуацией.