Is it possible to have text-overflow: ellipsis without white-space: nowrap?

It seems that text-overflow: ellipsis is dependent on white-space: nowrap. The problem with this is that it limits the text to one line. However, what if I need to have 4 lines, and the ellipsis on the last line in the case of overflow?

What it's currently doing...

Lorem ipsum dolor sit amet ...

What I want...

Lorem ipsum dolor sit amet, 
consectetur adipisicing el-
it, sed do eiusmod tempor  
incididunt ut labore et ...


Unfortunately the behavior you are seeing is correct for text-overflow: ellipsis.

Cross-browser support for hyphenated text is not a reality yet with CSS only, but you can see a good roundup of what's possible here:

Some browser-specific CSS is available for firefox and webkit browsers:

-webkit-hyphens: auto;
-webkit-hyphenate-character: '~';
-moz-hyphens: auto;

The big issue with hyphenation is that it needs to be language aware to work properly, which is tricky.

Maybe a JS solution like this will help you?


 ? "text-overflow: ellipsis;" in XUL applications
 ? Ellipsis for overflow text in dropdown boxes
 ? text-overflow: ellipsis not working
 ? text overflow ellipsis: avoid word break
 ? text-overflow:ellipsis; not truncating overflowing text and giving ellipsis
 ? Word wrap: ellipsis without css
 ? Cutoff multiple lines of text with text-overflow: ellipsis
 ? CSS text-overflow in a table cell?
 ? CSS text-overflow in a table cell?
 ? CSS text-overflow in a table cell?