Is it possible to hide the overflow of the text in say a fixed width div and replace it with "..."? It obviously looks ugly if the text is just cut off, I really need to be able to show a ... in these cases.
-
Check out this question stackoverflow.com/questions/802175/…irishbuzz– irishbuzz2010-09-19 17:08:18 +00:00Commented Sep 19, 2010 at 17:08
Add a comment
|
4 Answers
You can do it with text-overflow: ellipsis;, but it doesn't seem to work in IE6 and Firefox..
3 Comments
Joe
very nice! just what i needed.
Yi Jiang
@Joe This is not a good solution.
ellipsis is an IE proprietary value for overflow, and doesn't work on any browser other than IE.
KarmicMind
As the page I linked to states (and I have tested this), it works fine in Chrome, Safari, Opera(with '-o-text-overflow') and of course IE7+
I'm not sure if you can do that only with CSS, you have to use either javascript or php.
Comments
You cannot do this with css. You'll have to do it with PHP or Javascript. Here's a decent tutorial on doing it with JS.
Comments
Hope this will be helpful
$('#customComboBox').text(($.trim($('#customComboBox').text()).length > 19) ?
$.trim($('#customComboBox').text()).substring(0, 16) + '...' :
$.trim($('#customComboBox').text()));
1 Comment
Yi Jiang
Not a very good solution - you still need to know how many characters till the text will overflow. Also, the jQuery code can be made much, much, more efficient with some caching.