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

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

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

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

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

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

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

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

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

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