муляция text-overflow

Эффект «скрытия контента» появляется только если есть что скрывать (следовательно, не будет ситуации когда места для контента хватает, но визуально кажется, что уже что-то скрыто).
Можно навесить title на элемент или что-то ещё только если возникает необходимость.
Метод должен работать как минимум IE7+, хотя данные примеры для него не оптимизированы (работает только тултип).

Можно поизменять размер окна, чтобы увидеть момент перехода.

lock with a lot of content, with gradient

There is a lot of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

And just a few words

And some more words to test this item while resising the window

lock with inline-blocks and non-native ellipsis overflow (works in earlier Fx).

And just a few words

And some more words to test this item while resising the window

lock with a reversed non-native ellipsis.

And just a few words.

And some more words to test this item while resising the window.

Вы можете прокомментировать эту статью в Мастодоне.

Опубликовано 8 марта 2011 г. с метками: #Experiment #Practical #CSS

Эмуляция text-overflow

Block with a lot of content, with gradient

Block with inline-blocks and non-native ellipsis overflow (works in earlier Fx).

Block with a reversed non-native ellipsis.

муляция text-overflow

lock with a lot of content, with gradient

lock with inline-blocks and non-native ellipsis overflow (works in earlier Fx).

lock with a reversed non-native ellipsis.