Перенос и разбиение слов в HTML.
Первое, что обычно приходит в голову - заранее отформатировать текст с учетом предполагаемой ширины колонки (например - php/perl/python скриптом) и выдать его браузеру уже построчно (с br> после каждой строки). Такой подход редко приводит к желаемому результату, поскольку необходимо заранее, с точностью до пиксела знать ширину ячейки в которую будет выведен текст и ширину каждого символа в строке текста. Даже если предположить, что ширина таблицы и ячеек заданы в пикселах, все равно - разнообразие точек зрения браузеров на виды и размеры шрифтов общеизвестно. Кроме того, пользователь может изменить размеры окна браузера после загрузки страницы, так что пришлось бы переформатировать текст js скриптом по OnResize.
Очевидно, необходим более гибкий и аккуратный метод. Посмотрим, что нам предлагают авторы браузеров и стандартов.
Microsoft предлагает хороший способ:
P STYLE="word-wrap:break-word;width:100%;left:0">
LongWordLongWord...LongWordLongWord/P>
Или, если надо разрешить разрывы слов только на конкретном участке:
P>LongWordLongWord...span STYLE="word-wrap:break-word;width:100%;left:0">LongWordLongWord---LongWord/span>::LongWordLongWord,,,LongWordLongWord/P>
(знаки препинания вставлены произвольно)
word-wrap:break-word; в MSIE5.5. Видно, что
на участке ограниченном span>/span>
браузер разорвал слово и перенес его.
Однако за пределами этого участка текст
переносится как обычно - по пробелам.
В этом параграфе слово будет разбито автоматически. Одно плохо - метод работает только в MSIE 5.5 и выше (проверено в 5.5 и 6.0).
Будем смотреть дальше:
В стандарте на HTML 4 существует символ "" - так называемый "мягкий перенос". Вообще же, это стандартный символ в Unicode и Latin-1 который Windows знает, но не всегда любит [правильно] показывать.
Если его вставить в слово, например так:
LongWordLongWordLongWordLongWord
..то браузер в нормальных условиях этот символ не отобразит вообще. Однако, если места для слова не хватает, в этом месте оно должно быть автоматически перенесено на следующую строчку и появится знак переноса "-". Я говорю должно быть, поскольку браузеры - не всегда отражение стандарта на HTML.
© 2026, JohnCMS