Question

I need to truncate strings in a side menu to make them fit into a div without a linebreak. The divs have a fixed width. I’m looking for a library to do that for me.
If a string is too long to fit into the div, it should be truncated like this:

<div>This string is too long</div> ==> <div>This string is...ong</div>

As you can see, the string is not only truncated by an ellipsis but the last three letters are also visible. This is meant to increase readability. The truncation should not care about spaces.

Does anyone know of a library that includes such functionality? We’re mainly using jQuery throughout the project.

Thanks in advance!

Answer 1

I don’t know of a library per se that does that, but using an HTML5 Canvas and Canvas text metrics, you could determine whether the string would fit in, and if not, how much you’d have to cut it out.

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.font = '12pt Arial';
var metrics = context.measureText('measure me!');
var width=metrics.width;