ext-overflow emulation and gradient overflow

  1. The «overflow» effect is visible only if there is something to hide (so, there wouldn’t be a case when there is an overlayed gradient that hides a part of text, that would be visible whole anyway).
  2. Also, you can add a title attribute to a block, that would appear only when something is hidden.
  3. You can use this method starting from the IE7 (however, I hadn’t optimise it for this experiment, so barely only title would be visible)

Resize the browser’s window to see the switching of overflow effect.

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.

Let me know what you think about this article on Mastodon!

Published on with tags: #Experiment #Practical #CSS