Обрезание с многоточием

Автор: Aport Пятница, Январь 23rd, 2015 Нет комментариев

Рубрика: Разное

Сделаем обрезание текста с заменой последних символов на многоточие для текста, который не помещается в каком-либо элементе

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

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

technosila1

Названия товаров не помещаются и просто обрезаются свойством overflow: hidden
Не очень красиво, я бы сказал. Но ведь есть же замечательное, но крайне редко используемое (мне ни разу не попадалось на глаза его использование) свойство text-overflow: ellipsis.сайт источник http://yapro.ru Mon Feb 15 2010 10:43:51 GMT+0300

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

А вот и примеры:

Для тех, кто просматривается данную страницу в браузере Firefox, посмотрите на изображение того, как это выглядит в IE:

Обрезание с многоточием

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

Оказывается Хром 2 и Сафари 4 понимают без префиксов, а ФайрФокс 3 не понимает вовсе.

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

 

Источник: yapro.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты