2

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.

irishbuzz
  • 2,420
  • 1
  • 19
  • 16
Joe
  • 3,043
  • 9
  • 43
  • 56
  • Check out this question http://stackoverflow.com/questions/802175/truncating-long-strings-with-css-feasible-yet – irishbuzz Sep 19 '10 at 17:08

4 Answers4

1

You can do it with text-overflow: ellipsis;, but it doesn't seem to work in IE6 and Firefox..

http://www.quirksmode.org/css/textoverflow.html

KarmicMind
  • 166
  • 2
  • 8
  • very nice! just what i needed. – Joe Sep 19 '10 at 22:30
  • 1
    @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. – Yi Jiang Sep 29 '10 at 05:52
  • 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+ – KarmicMind Sep 29 '10 at 20:19
0

I'm not sure if you can do that only with CSS, you have to use either javascript or php.

Ciprian Tepes
  • 806
  • 9
  • 11
0

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.

fredley
  • 32,953
  • 42
  • 145
  • 236
0

Hope this will be helpful

$('#customComboBox').text(($.trim($('#customComboBox').text()).length > 19) ? 
    $.trim($('#customComboBox').text()).substring(0, 16) + '...' : 
    $.trim($('#customComboBox').text()));
Yi Jiang
  • 49,435
  • 16
  • 136
  • 136
Raghu Kumara Chari
  • 166
  • 1
  • 2
  • 9
  • 1
    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. – Yi Jiang Sep 29 '10 at 05:55