Я бы сделал лучше

Студия Лебедева порадовала нас новым творением — обновился интернет-магазин Техносилы. Все мило и, как обычно в последнее время у Лебедева, лаконично, но…

Что мы видим на первой же странице:

technosila1

Названия товаров не помещаются и просто обрезаются свойством overflow: hidden
Не очень красиво, я бы сказал. Но ведь есть же замечательное, но крайне редко используемое (мне ни разу не попадалось на глаза его использование) свойство text-overflow: ellipsis. Что удивительно, его (это свойство) поддерживает дружное семейство браузеров по имени Internet Explorer. Это свойство имеет два (согласно с сайтом MS) значения: clip (по умолчанию) и   ellipsis, что в сочетании со свойством  overflow: hidden дает замечательный результат: текст, который не помещается в каком-либо элементе обрезается с заменой последних символов на многоточие!!! Получается очень аккуратно и симпатично.
А вот и примеры:

Без применения overflow и text-overflow

Съешь еще этих мягких французских булок

Теперь установим overflow: hidden и text-overflow:clip; (поведение по умолчанию)

Съешь еще этих мягких французских булок

И наконец требуемый результат в результате применения overflow: hidden и text-overflow:ellipsis;

Съешь еще этих мягких французских булок

Некоторые браузеры, в частности Opera, требуют своего префикса для этого свойства. MSDN рекомендует так же использовать префикс -ms для IЕ8, но понимает это свойство и без него.

Проверил, что Хром 2 и Сафари 4 понимают без префиксов, а ФайрФокс 3 не понимает вовсе

Но если не использовать это свойство, то хотя бы снабдить заголовок соответствующей всплывающей подсказкой, хотя бы в виде title

Я бы сделал лучше: 3 комментария

  1. Прикольно не знал про это свойство, надо запомнить может пригодится. А вобще у ИЕ много всяких фишек которые не используются из за того что их нет в других браузерах.

  2. Вот и радости так делать, если FF его не понимает и не делает? Может лучше, чем выкручиваться, научимся планировать длину содержимого сайта? Или нет! Лучше еще кучу starhack`ов навалим уже для FF )))

  3. Согласен, что это проблема контента. Или дизайна, или реализации дизайна, неважно. Это свойство можно использовать как страховочное, когда у нас нет возможности контролировать контент, например. А учитывая, что свойство уже рабочих черновиках W3C, то знать его не будет лишним.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *