to add ellipsis to a sentence that is too long you can use this method: http://jsfiddle.net/ArKeu/
that works great for widths but is it somehow possible to add ellipsis vertically too? that doesn't seem to work :(
http://jsfiddle.net/ArKeu/2/
does anyone know this, Thanks.
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.
The text-overflow property in CSS deals with situations where text is clipped when it overflows the element's box. It can be clipped (i.e. cut off, hidden), display an ellipsis ('…', Unicode Range Value U+2026) or display an author-defined string (no current browser support for author-defined strings).
To have text-overflow property used, the text element must first overflow. This can be done by preventing the element from wrapping the overflowed content to a new line, which can be done by setting white-space: nowrap . Additionally overflow must be set to hidden .
Currently there is no cross-browser CSS-only way to achieve such behavior.
You can do this now only in webkit-based browsers by using the -webkit-box
and -webkit-line-clamp
, see http://jsfiddle.net/ArKeu/7/
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