Is there a way to crop a string in the middle using CSS or JS?

Question

I need a way to crop a line in the middle for a mobile application. The line has important information at the end that I always want to see. I could not find a CSS method to do this in the middle of the line, just the beginning or the end.

I am working on how to do this in JS, but I think it has already been discussed, and I do not want to reinvent the wheel. I believe the problem is that I need it to be dynamic based on screen size. I can't just say if string.length > 100 then crop. I need to see what will fit, then truncate and make him listen to changes in size, as if the orientation has been changed.

Answer 1

With css, you can easily use ellipsis, but only at the end of the text.

However, there is a jQuery plugin called dotdotdot that can do this.

Here is the page: DotDotDot

One of their demos shows how a long URL can be converted to www.website.com/that/should/... /file.html

---

I spent some time trying to get this to work correctly, and it is still not quite perfect, but it works very well.

 // @param element obtained with $("selector") // @param spacer ' ' for text, or '/' for links. // @param position number of words to leave at end function doEllipsis(element, spacer, position) { $(element).data('ell-orig', $(element).html()); $(element).data('ell-spacer', spacer); $(element).data('ell-pos', position); var pieces = $(element).html().split(spacer); if (pieces.length > 1) { var building = ""; var i = 0; // for "position" to mean "fraction where to wrap" (eg. 0.6), use this: // for (; i < pieces.length*position; i++) { for (; i < pieces.length-position; i++) { building += pieces[i] + spacer; } building += '<span class="ell">'; for (; i < pieces.length; i++) { building += pieces[i] + spacer; } building += '</span>'; $(element).html(building); $(element).dotdotdot({ after: 'span.ell', wrap: 'letter' }); } } // use to redraw after the size changes etc. function updateEllipsis(element) { var orig = $(element).data('ell-orig'); var spacer = $(element).data('ell-spacer'); var pos = $(element).data('ell-pos'); $(element).trigger("destroy"); $(element).empty(); $(element).html(orig); doEllipsis(element, spacer, pos); } 

Here's the script for this example (it uses a copy hosted on my Dropbox, so it’s pretty sure that it won’t work forever).

He reacts (to some extent, one way or another) and puts the ellipsis exactly where you tell him.

Answer 2

How I would do it ...

Select a monospace font so that each character has the same width. Then determine the width of each character with the desired font size. Then find out dynamically how many characters you can fit in an element or window at hand; it will be max. Then you can use this maximum number in your truncation function, which will make the new string length max minus 4 (subtract 3 for "..." and 1 so that the last character does not accidentally slide off-screen).