Question

I have a span that is dynamically filled with content. When the content reaches the width of 500px, I need to read the content that is of 300px.
The content can be one line or multiple lines.

Any solution?

Answer 1

The grabbag.js library has a method just for this purpose*.

There is not much documentation, but there is a function in there called grabbag.measure.crop that you can use to crop a string to a given dimension. I’ve written a little JS fiddle that will demonstrate how to use the library, but the basics go like this:

var result = grabbag.measure.crop(inputString, 300 /* number of pixels */, ele);

Where ele is a DOM element to “steal” styling from. Result will contain a string that just barely fits under the number of pixels given.

Hope that helps.

• Disclaimer: I am one of the authors of the library.