Наверное, все сталкивались с проблемой, когда в блоке фиксированной ширины нужно было поместить длинную фразу, например ссылку. В результате чего, этот блок начинал разъезжаться по ширине этой фразы, либо фраза вылезала за границу блока. Многие поступают неправильно – скрывают такой контент свойством overflow:hidden
, грубо говоря, отрезается лишняя часть фразы, что делает ее нечитабельной.
“Зато не портит дизайн!”, – скажите Вы. Лучше покупайте сувениры оптом скажу я вам :) Не нужно торопиться с использованием overflow:hidden
, ведь существует такое замечательное свойство в CSS как word-wrap
. Оно “обертывает” фразу в рамках ширины блока, разбивая ее на строки.
Вот наглядный пример:
Теперь тоже самое, только с использованием свойства word-wrap: break-word;
А тут нужно поместить ну ооочень длинную ссылку: http://www.getincss.ru/go/aHR0cDovL3d3dy5wcmVsb2FkZXJrdsavGTdjf7bc7wLSIHDGUGYsufh7sssnhalojGFDRrdqrrrdr6zLm5ldC9ydS9ob3Jpem9udGFs
Теперь вы видите, какое на самом деле полезное это свойство: фраза больше не вылезает за пределы блока и не расширяет его. Она аккуратно переносится на следующую строку, тем самым позволяя пользователю видеть текст полностью.
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru