Статьи | Перенос и разбиение слов в HTML.

При создании различных лент новостей и колонок онлайн газет, web дизайнеры и программисты сталкиваются с ситуацией, когда в тексте попадается очень длинное слово (синхрофазотрон, www.enlight.ru/camera/117/index.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.

действие в MSIE 5.0.x

Под MSIE 5.0.x все с виду работает, но в определенные моменты (при изменении размера окна браузера) определенные слова вдруг оказываются разбиты черточками без всякой на то видимой причины.

NS 4.05/Win32, NS4.7/Win32 и вовсе показывает дефисы во всех словах, независимо ни от чего.

В MSIE6 работает нормально.

В NS4.7/FreeBSD, NS6.0/Win32 не работает.

а вот так понимает NS 4.05 и 4.7

Помимо прочего, если поместить разбитую таким образом строчку в clipboard, а затем извлечь обратно - невидимые переносы превратятся в банальные "-". Это произойдет например в ICQ2000, GoldED 3.0.1/Win32, EditPlus. А Outlook и WinWord с одной стороны воспринимают "" правильно, но с другой ведут себя с такими строчками немного странно.

.................................................................................................................

Материал по теме:

- Обмен ссылками себе "в минус".

- Сверхбыстрый дизайн (и его "подводные камни").

- 301 редирект (перенаправление через mod_rewrite).

- Как сделать, чтобы Rambler находил мои документы!

- Бесплатные электронные книги (ebooks) как прирост ТРАФИКА на ваш сайт.

- Cпособы повышения индекса цитирования (тИЦ).

- Cпособы получения контактной информации посетителя (его e-mail).

- Cоветы по написанию эффективных объявлений для Google AdWords.

- Аккуратный HTML.

- Сверхбыстрый дизайн (и его "подводные камни").

- Google PR 0 PageRank. Почему?

- Принцып работы поисковых систем.

- Уменьшаем исходящий траффик.

- Грамотное написание текстов для веб сайтов.

- Начинающему о заработке в Интернете