Word-wrap - свойство CSS3, которое поддерживается во ВСЕХ браузерах

Word-wrap

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

Верите вы или нет, но свойство CSS3 word-wrap работает во всех браузерах, включая все версии IE (даже в IE5).

PHP:



#selector {
    word-wrap: break-word;
}

#selector-2 {
    word-wrap: normal; /* устанавливается по умолчанию */
}


Очень просто и очень практично, если вы понимаете, что оно делает.

Что оно делает?

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

Например, у вас может быть определенный элемент шириной 200 px, а внутри него может быть расположена ссылка, которая содержит действительно длинное слово, которое растягивает элемент (то есть общая длина становится больше 200 px и без пробелов). Если установлено свойство word-wrap со значением break-word, то слово действительно будет разрываться и переноситься на следующую строку, так чтобы шаблон не нарушался.

Как это можно использовать на практике?

В комментариях, люди, теоретически, могут делать пакости, размещая очень длинное слово. В таком случае нарушается структура страницы и она выглядит ужасно. Иногда такое происходит, когда кто-нибудь размещает длинную ссылку, в которой нет разрывов. Такой тип вандализма может быть предотвращен с помощью свойства word-wrap, добавленного к секции комментариев .

То есть данное свойство полезно для модерирования генерируемого пользователем контента, который потенциально может нарушить структуру шаблона страницы при размещении длинной непрерывной строки.