Question

the following fiddle demonstrates the problem:

http://jsfiddle.net/inconduit/2z6Xa/

this is using jquery.dotdotdot plugin for truncating text with an ellipsis.

when there’s a single word like a_really_long_filename_with_no_spaces_at_all.txt that overflows a div, this plugin does not truncate it. is there any way to make this happen?

the html:

  <div id="wrapper">this_does_not_truncate_because_there_are_no_spaces</div>
  <br><br>
  <div id="wrapper2">this one has spaces and is truncated properly</div>

​
the javascript:

 $("#wrapper").dotdotdot({wrap: 'letter'});
 $("#wrapper2").dotdotdot({wrap: 'letter'});

the css:

#wrapper {
    width: 100px;
    height: 20px;
    border: 1px solid red;
}
#wrapper2 {
    width: 100px;
    height: 20px;
    border: 1px solid red;
}​

Answer 1

Do you really need a plugin to do this? Have you tried using the CSS text-overflow:ellipsis? It’s supported by every single browsers except really old ones like IE 5.5 or below or FF 6 or below.

More information on text-overflow: https://developer.mozilla.org/en-US/docs/CSS/text-overflow

A demo page: http://davidwalsh.name/demo/css-ellipsis.php