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,
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: http://code.google.com/p/hyphenator/wiki/en_CSS3Hyphenation
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? http://code.google.com/p/hyphenator/