Replace too long strings with "..."

Question

Lets say we have a <div style="width:100px;">This text is too long to fit</div>

The text in the div is dynamic. And I'd like to force the text to fit in width and not break. So i need some kind of functionality to test if the text is going to fit, and if it is not, then i'd like to display the portion of the text that will actually fit. And append ...to the end.

Result for a too long text should be something like this: "This text is..."

Is there some standard way of doing what i want? Either by javascript, jquery, jsp or java?

Thanks!

Edit: Thanks for your quick and many answers! I was doing this in java by guessing how many characters would fit. It seemed like a less than optimal solution, so thats why i came here.

The css solution is perfect for me. Its not that big of a deal that it doesnt work for firefox, since my clients all use ie anyway. :)

Answer 1

you could do it with css3 using text-overflow:ellipsis http://www.css3.com/css-text-overflow/

or if you insist on using the js way, you can wrap the text-node inside your div and then compare the width of the wrap with the with of the parent.

Answer 2

If you want to process the data you can use a function:

function TextAbstract(text, length) {
    if (text == null) {
        return "";
    }
    if (text.length <= length) {
        return text;
    }
    text = text.substring(0, length);
    last = text.lastIndexOf(" ");
    text = text.substring(0, last);
    return text + "...";
}

text = "I am not the shortest string of a short lenth with all these cows in here cows cows cows cows";

alert(TextAbstract(text,20));

EDIT: process all div with excess length in the text:

    var maxlengthwanted=20;

    $('div').each(function(){
        if ($('div').text().length > maxlengthwanted)
            $(this).text(TextAbstract($(this).text()));
    });

EDIT: More compact version to process all div with excess length in the text, breaks on space.

function textAbstract(el, maxlength = 20, delimiter = " ") {
  let txt = $(el).text();
  if (el == null) {
    return "";
  }
  if (txt.length <= maxlength) {
    return txt;
  }
  let t = txt.substring(0, maxlength);
  let re = /\s+\S*$/;
  let m = re.exec(t);
  t = t.substring(0, m.index);
  return t + "...";
}

var maxlengthwanted = 23;

$('.makeshort').each(function(index, element) {
  $(element).text(textAbstract(element, maxlengthwanted, " "));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="makeshort">This is a fun thing to process, modification of this is going to just be soo much fun</div>
<div class="makeshort">second This is a fun thing to process, modification of this is going to just be soo much fun</div>
<div class="makeshort">IBShort Wilson</div>
<div class="makeshort">another This is a fun thing to process, modification of this is going to just be soo much fun</div>
<div class="makeshort">more This is a fun thing to process, modification of this is going to just be soo much fun</div>
<span class="makeshort">Me also, a span that is a fun thing to process, modification of this is going to just be soo much fun</span>
<span class="makeshort">more This is a fun thing to process, modification of this is going to just be soo much fun</span>
<ul>
  <li class="makeshort">li1 more This is a fun thing to process, modification of this is going to just be soo much fun</li>
  <li class="makeshort">li 2 more This&#10;is a&#10;fun thing to process, modification of this is going to just be soo much fun</li>
  <li class="makeshort">li 3 also more&#20;This&#09;is&#09;a fun thing to process, modification of this is going to just be soo much fun</li>
  <li class="makeshort">li 4 also more This&nbsp;is&nbsp;fun thing to process, modification of this is going to just be soo much fun</li>
</ul>