Does anybody know of a way to use {text-overflow: ellipsis;} on a piece of text that's wrapping to a second line?
Adding {whitespace: nowrap;} makes text-overflow work, but I need the text to wrap so I really can't use that.
+2
A:
The {text-overflow: ellipsis;} property only works in IE. I would suggest instead to put your text inside of something like a div and set the maximum height to whatever you want and put a text overflow:hidden into the CSS of the div. This will cause the text to disappear once it leaves the div. I know it doesn't create the {...} but that only works in IE anyways.
RandomBen
2010-03-05 21:37:45
Opera, Safari and Chrome also support `text-overflow: ellipsis`: http://www.css3.info/preview/text-overflow/
mercator
2010-03-05 22:46:00
So all major browsers except Mozilla Firefox then?
RandomBen
2010-03-05 22:50:05
@RandomBen: Yep (https://bugzilla.mozilla.org/show_bug.cgi?id=312156). Opera has been supporting it since 9.5 (as `-o-text-overflow`: http://www.opera.com/docs/specs/opera95/#css), Webkit for even longer, apparently: https://developer.mozilla.org/En/CSS/Text-overflow.
mercator
2010-03-05 23:12:12
### deleted comment
Tom
2010-03-06 06:31:04
Yeah... text-overflow definitely works in more than just IE. Setting the element to {overflow:hidden} is necessary when using text-overflow, anyway so I'm already doing that.
Andrew Philpott
2010-03-07 17:37:45
A:
You could just specify the direction in which overflow will be applied on the parent element:
overflow-x:
overflow-y:
Just apply it vertically and leave it out horizontally.
Tom
2010-03-06 06:28:21