Блог «Затухание» текста в строках таблицы

Многие из нас пользуются почтовыми сервисами Google и Яндекса. Наверняка все замечали, как при сужении окна браузера обрезается текст в строке темы письма. На сайтах, где нужно представлять список со множеством строк и длинными надписями в них, этот прием незаменим.

Смотреть пример

Заключаем текст, который будем обрезать, в div и прописываем для него overflow: hidden. Для таблицы обязательно нужно прописать table-layout:fixed.

Чтобы сделать эффект «затухания» теста, в конце строки накладываем на него прозрачный градиент. Не забываем вынести хаки для IE в отдельный файл, чтобы наша страница проходила валидацию css.

Если есть вопросы, спрашивайте :)

Поделиться ссылкой на статью:

Предыдущая статья
Следующая статья

Комментарии

Чернев 04 августа 2008 года, 8:54 #

Оу. Клевый приемчик.

Положил её в свою копилку нужных идей (-:

Вебмастер 07 августа 2008 года, 16:36 #

Хороший прием. Пополню им свою базу закладок по теме верстки. Возможно пригодится в дальнейшей разработке сайтов. Недавно начал изучать W3C-валидную верстку. Спасибо. :-)

FelikZ 17 сентября 2008 года, 4:34 #

Супер вещь! Прям пользуюсь и радуюсь и всем советую!

Алекс 28 сентября 2008 года, 16:44 #

отличный приёмчик! для больших таблиц в самый раз

angelZ 03 октября 2008 года, 5:27 #

Ага, когда мя спросили как это делается я сразу предположил наложение PNG, но до своей реализации так дело и не дошло, видимо пока не понадобилось.

Zhenja 29 июля 2010 года, 16:43 #

Большое спасибо за пример. Уже даже реализовал его в своём проекте.

Написать комментарий

Используйте в комментариях html-теги

ссылка — <a href=""> </a>
выделение — <strong> </strong>
удалённый текст — <del> </del>
цитата — <blockquote> </blockquote>
фрагмент кода html — <pre lang="html"> </pre>
фрагмент кода css — <pre lang="css"> </pre>

Подпишитесь!

Внимание! АКЦИЯ!

Вступите в группу Вконтакте и получите бесплатную консультацию по верстке. Расскажите друзьям про группу и получите 5% скидку на услуги Webmolot.com