Is vertical text-overflow possible with css3?

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.

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/

The css rule boils down to:

your-css-selector {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
}

Where the number value for -webkit-line-clamp is the maximal number of lines you want to be displayed.

UPDATE! UPDATE! UPDATE!

Since the time when I wrote that answer, Clamp.js seems to have cooled-off and died. The project still exists on github so you can check it out.

But, there is a better alternative here: ftellipsis. It is cross-browser.

Why should webkit browsers have all the fun?

This solution here is much more extensive, and provides support for other browsers as well. http://reusablebits.com/post/2642059628/introducing-clamp-js (dead link)

CSS Overflow Module Level 3 is a W3C specification which, as of 2022-02-22, is in Working Draft state.

It defines a CSS property called line-clamp which accomplishes your goals. It is based on the earlier Webkit property, mentioned in kizu's answer; and as such, the evolving specification continues to be available in most browsers with the -webkit- prefix.

I will update this answer as the CSS Overflow Module Level 3 specification advances.