Menu
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 ...
381
To force overflow to occur and ellipses to be applied, the author must apply the nowrap value to the white-space property on the element, or wrap the content in a <NOBR> tag.
text-overflow: ellipsis only works when the following is true: The element's width must be constrained in px (pixels) – it doesn't work with values specified using % (percent.) The element must have following properties set: overflow: hidden and white-space: nowrap.
nowrap. Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered.
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.
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/
85
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
