Блог → “Затухание” текста в строках таблицы
Многие из нас пользуются почтовыми сервисами Google и Яндекса. Наверняка все замечали, как при сужении окна браузера обрезается текст в строке темы письма. На сайтах, где нужно представлять список со множеством строк и длинными надписями в них, этот прием незаменим.
Смотреть пример
Заключаем текст, который будем обрезать, в div и прописываем для него overflow: hidden. Для таблицы обязательно нужно прописать table-layout:fixed.
Чтобы сделать эффект “затухания” теста, в конце строки накладываем на него прозрачный градиент. Не забываем вынести хаки для IE в отдельный файл, чтобы наша страница проходила валидацию css.
Если есть вопросы, спрашивайте :)
- 6 комментариев
- 04 августа 2008 года
Комментарии
Спасибо за комментарий!Написать комментарий
Используйте в комментариях html-теги
Оу. Клевый приемчик.
Положил её в свою копилку нужных идей (-:
Хороший прием. Пополню им свою базу закладок по теме верстки. Возможно пригодится в дальнейшей разработке сайтов. Недавно начал изучать W3C-валидную верстку. Спасибо. :-)
Супер вещь! Прям пользуюсь и радуюсь и всем советую!
отличный приёмчик! для больших таблиц в самый раз
Ага, когда мя спросили как это делается я сразу предположил наложение PNG, но до своей реализации так дело и не дошло, видимо пока не понадобилось.
Большое спасибо за пример. Уже даже реализовал его в своём проекте.