Ответ 1
Попробуйте word-wrap: break-word;, он должен вести себя так, как вы ожидаете.
Умнее сломать слово в CSS?
Если я просто положил word-break: break-all на элемент, я часто получаю следующее:
Привет, люди, я печатаю mes
шалфей, который слишком долго подходит!
Очевидно, это было бы намного лучше:
Привет, люди, я набираю текст сообщение, которое слишком долго подходит!
Но в то же время, если кто-то пишет:
BLAAAAAAAAARRRRRRRRRRRRGGGGGGGGHHHHHHHH!!!!!!
Тогда я бы хотел, чтобы это было:
BLAAAAAAAAARRRRRRRRRRR
RGGGGGGGGHHHHHHHH!!!!!!
Кажется, я не могу найти способ сделать это.
Обратите внимание, что ширина элемента не является фиксированной и может меняться.
Ответы
Ответ 2
Для интеллектуальных разрывов слов или для правильного разрыва слов в первую очередь вам нужны языковые правила. Для английского и многих других языков правильное разбиение означает перенос с дефисом, добавленным в конце строки, когда происходит разрыв.
В CSS вы можете использовать hyphens: auto, хотя вам в основном по-прежнему нужно дублировать его с использованием префиксов поставщиков. Поскольку это не работает в IE 9, вы можете вместо этого использовать перенос на основе JavaScript, например Hyphenate.js. В обоих случаях важно использовать разметку языка (атрибут lang).
Разрыв длинных неотрицаемых строк - это другая проблема. Лучше всего их обрабатывать при предварительной обработке, но в простой настройке word-break: break-word (что означает неправильное разбиение слов, например, на английском языке) можно считать чрезвычайной ситуацией.