Append "..." when a string is larger than desired

Question

I'm looking for a good way to append "..." when I need to gracefully display a string that is too large and doesn't fit in the space that I want.

The way that I'm currently doing that is looking for a max length of characters that will fit in the space, then cut the string to that length and append the "..." . All that in the server-side.
In pseudocode should look like:

// I define this MAXCHARS var value by hunch
String outputString = MyLengthyString.SubString(0, MAXCHARS)
outputString.concatenate("...")
view.aLabelInThePage = outputString

The problem is when I'm not using fixed-length fonts, it could be displayed not in the way that I want (occupying all the space).

Is there any way to get the desired results only using javascript and CSS? If not, is there a better way than mine's?

Answer 1

You can use text-overflow: ellipsis;, but it's not supported by Firefox.

Answer 2

There's a CSS3 property, text-overflow with a value of ellipsis, introduced in IE6 and adopted by some browsers but not Firefox:

#mySpan {
  text-overflow: ellipsis;     /* IE 6,7, Webkit */
  -ms-text-overflow: ellipsis; /* IE 8   */
  -o-text-overflow: ellipsis;  /* Opera  */
}

This page has a non-JS Firefox solution, but it's not perfect and has a couple of limitations.

Answer 3

Will the jquery width command work, along with a second span tag that just shows the "..."?

if ($("#mySpan").width() > 400) {
     $("mySpan").width(400);
     $("mySpanEllipsis").show();
} 
else {
     $("mySpanEllipsis").hide();
}

And your HTML looks like

<span id="mySpan"></span><span id="mySpanEllipsis">...</span>

Not tested, so use at your own risk :-).