CSS свойство word-wrap: решение проблемы переноса длинных слов

Наверное, все сталкивались с проблемой, когда в блоке фиксированной ширины нужно было поместить длинную фразу, например ссылку. В результате чего, этот блок начинал разъезжаться по ширине этой фразы, либо фраза вылезала за границу блока. Многие поступают неправильно – скрывают такой контент свойством overflow:hidden, грубо говоря, отрезается лишняя часть фразы, что делает ее нечитабельной.

“Зато не портит дизайн!”, – скажите Вы.  Не нужно торопиться с использованием overflow:hidden, ведь существует такое замечательное свойство в CSS как word-wrap. Оно “обертывает” фразу в рамках ширины блока, разбивая ее на строки.

Вот наглядный пример:

CSS свойство word-wrap: решение проблемы переноса длинных слов

Теперь тоже самое, только с использованием свойства word-wrap: break-word;

А тут нужно поместить ну ооочень длинную ссылку: http://www.getincss.ru/go/aHR0cDovL3d3dy5wcmVsb2FkZXJrdsavGTdjf7bc7wLSIHDGUGYsufh7sssnhalojGFDRrdqrrrdr6zLm5ldC9ydS9ob3Jpem9udGFs

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

756 просмотров

Комментарии