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

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

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

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

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.

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

Оцени публикацию:
  • 14,58
Оценили человек: 14

Похожие статьи:

Справочники и учебники:


Комментарии посетителей:
  • Огромное спасибо.... а как сделать чтобы указать Например 30 символов а все что дальше обрывалось тремя точками?
    04 мая 2010, 11:16 коммент полезен : 0 # дмитрй
    • для этого например в php существует функция substr, в др. языках тоже есть подобные функции ;-)
      10 мая 2010, 08:11 коммент полезен : +2 # Admin
  • Официальная работа на дому
    14 января 2017, 16:05 коммент полезен : 0 # Regorwot
  • Официальное трудоустройство, работа через интернет.
    23 января 2017, 21:13 коммент полезен : 0 # Megorwot (гость)
  • Ваш первый заработок за 60 минут. Без рисков законно!
    27 января 2017, 18:27 коммент полезен : 0 # Vnikawot (гость)
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Введите изображенные цифры:
Captcha
Главная
X

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2017 YaPro.Ru

Главная » Веб-мастеру » CSS »