Константино-польский

Повторим урок про Константинопольского и невлезающий текст.

Невлезающих в поезд людей нельзя обрезать дверями, посадить на крышу или накрыть чем-то непрозрачным, да и вагон не растянешь. С невлезающим в блок текстом всё гораздо проще.


1. Переносите его на следующую строчку:


Но не забывайте про декоративные элементы:

Ничего не должно ломаться, если текст вдруг стал длиннее:

2. Когда структура страницы почему-то не допускает переносов, прячьте второстепенные слова, размеченные заранее:

3. Или делайте фейдаут:

Продублировав текст во всплывающей подсказке, элементарном title:

Кстати, кроме фейдаута ещё есть тень, не такой затёртый приём:

4. Нельзя переносить, резать и прятать — уменьшайте кегль, как на сайте «Я расту»:

Share
Send
Pin
 10   2012   вёрстка   дизайн
6 comments
Илья С. 2012

фейдаут как-то аккуратнее смотрится

Роман Комаров 2012

О, надо будет пример с тенью реализовать у себя в http://kizu.ru/fun/overflower/

Там, кстати, как раз такое поведение и реализовано, причём title виден только если есть фактически скрытый текст. Реализация, конечно, страдает излишним кодом (== для длинного списка не применимо т.к. будет тормозить рендеринг), но зато чистый CSS, можно вполне безопасно применять, если без фанатизма.

Андрей Федосеев 2012

А как лучше всего реализовать такой фейдаут или тень?

c 2012

s

Алексей Шургин 2012

Тень ок!

Артём Самохин 2012

Спасибо!)

Popular