Menu
I was wondering if there is any clever way, to achieve the css ellipsis effect without the need to apply white-space: nowrap also.
In other words, lets say we have a block element of a certain height and we'd like to let it get filled up with text-content, but the ellipsis should get applied as soon as there is no more room in horizontal plus vertical directions.
Quick example: http://jsfiddle.net/fpv9n/2/
Text should be like it is, but also with an ellipsis at the end. Any way to achieve that using CSS ? I would take JS solutions also into consideration.
894
To clip at the transition between characters you can specify text-overflow as an empty string, if that is supported in your target browsers: text-overflow: ''; . This keyword value will display an ellipsis ( '…' , U+2026 HORIZONTAL ELLIPSIS ) to represent clipped text.
text-overflow: ellipsis only works when the following is true: The element's width must be constrained in px (pixels) – it doesn't work with values specified using % (percent.) The element must have following properties set: overflow: hidden and white-space: nowrap.
A text-overflow property in CSS is used to specify that some text has overflown and hidden from view. The white-space property must be set to nowrap and the overflow property must be set to hidden. The overflowing content can be clipped, display an ellipsis ('…'), or display a custom string.
There is no way to do this using pure CSS. It's monstrous and sad. I've often desired this myself when you want the browser to "ellipsify" a multi-line text with possibly overflowing text whenever it spills out of the container.
129
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
