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

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

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

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

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

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

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

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


Комментарии посетителей:
  • Огромное спасибо.... а как сделать чтобы указать Например 30 символов а все что дальше обрывалось тремя точками?
    04 мая 2010, 11:16 коммент полезен : 0 # дмитрй
    • для этого например в php существует функция substr, в др. языках тоже есть подобные функции ;-)
      10 мая 2010, 08:11 коммент полезен : +2 # Admin
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

Новые заметки:

Про что мы забываем когда делаем оценку задачи по времени

Список вопросов для собеседования разработчика по телефону

Symfony2 авторизация без Doctrine2 для чайника

Phpstorm7 LiveEdit

Жесткий хабр или не хабр, тогда кто?

Яндекс.Деньги мошенничество

Как узнать какие страницы в поиске яндекса или это секрет

Последние комменты:

Yapro CMS:

Здравствуйте, Гость | Войти | Регистрация | Карта сайта | RSS ленты | Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

youtube.com/watch?v=7hFivbgIEqk

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

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