Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is vertical text-overflow possible with css3?

Tags:

css

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.

like image 947
cmplieger Avatar asked Aug 09 '11 22:08

cmplieger


People also ask

How do you overflow text in CSS?

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.

How does text-overflow work?

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).

How do you manage text-overflow?

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 .


1 Answers

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/

like image 176
kizu Avatar answered Sep 28 '22 10:09

kizu