муляция 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).
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 a reversed non-native ellipsis.
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.
Вы можете прокомментировать эту статью в Мастодоне.
Опубликовано с метками: #Experiment #Practical #CSS