However it comes at the cost that it takes more lines of CSS, and you have to manually set the maximum width. I find this technique better looking than the plain text-overflow:ellipsis as more of the text is actually shown, and it blends nicely with the design of the page. This element is positioned to the right of the container, and becomes visible only when the element expands. This element will have a linear-gradient that goes from transparent to the color of the background.
To prevent the text from breaking to a new line, we use white-space:nowrap.At that point, all excess text will be hidden thanks to the overflow:hidden property.The element will increase its width freely, until it hits the value set by max-width.Here is what each of these will help us with: The Ideaīy setting a max-width value, overflow:hidden and an :after pseudo element, we can achieve the effect that you can see in the demo. In this short tutorial, I will show you my new favorite technique which fades overflowing text gracefully into the background. In the past, this was only possible by slicing text on the server side, or with JavaScript, but today we can do it only with CSS thanks to properties like max-width and text-overflow. You have to be sure that your markup looks just as good with a 50 character username as it does with a 5 character one.
As web developers, we should build our sites so they accommodate variable lengths of text.
0 kommentar(er)
