How can I replace part of a string which is wider than 50 px with "..."?

Question

I am looking for a function which replaces part of a string which is wider than 50px with "...". I want to implement it in Javascript/jQuery.

Example:

Say I have a variable var="Theta Saving Non-Qualified Plan"; I want to put a restriction on the length of the string (based on pixel width). If the length of string is more that 50px, then the part of the string which is from the 51st pixel to theend of string will be replaced with "...".

Any idea guys?

Look at this thread: http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript — Afshin Mehrabani, May 27 '12 at 06:42
jQuery text width calculation: http://stackoverflow.com/questions/1582534/calculating-text-width-with-jquery (not an exapt duplicate though, as it only calculates and doesn't update the text). — Anders Abel, May 27 '12 at 06:43

score 2 · Answer 1 · answered May 27 '12 at 07:47

2

Don't try to reinvent the wheel. Use a Jquery plugin like this: http://tpgblog.com/2009/12/21/threedots-the-jquery-ellipsis-plugin/

answered May 27 '12 at 07:47

Mandar Limaye

1,900
16
24

score 1 · Answer 2 · answered May 27 '12 at 10:20

Here's a solution if you want to truncate the visual and don't really need to truncate the actual string:

<p>
  <span style='width: 50px; height: 1em; 
        overflow: hidden; display: inline-block'>
  This is the long string which should appear truncated followed by elipses
  </span>
  <span>...</span>
</p>

To make it work in IE6 and 7, I think you need to add the following CSS:

zoom: 1
*display: inline;

score 0 · Answer 3 · answered May 27 '12 at 06:44

0

This cannot be deduced as easy as you would like it to be. Because how much width a character or set of characters will take will depend upon the font-size. And calculating a text width is hardly accurate.

So, its better you create your interface to be friendly with characters rather than the width.

var t = $("#div").text();
if(t.length > 50) {
    $("#div").text(t.substr(0,50)+"...");
}

answered May 27 '12 at 06:44

Starx

77,474
47
185
261

why not remove characters until the div is 50px or less? – Emond May 27 '12 at 06:47
@Erno, Might be a good alternative, but question then will be, ***Is it worth the effort?*** I mean it is certainly not going to improve the performance – Starx May 27 '12 at 06:50
I agree. But that depends on the application, it still answers the question. – Emond May 27 '12 at 06:54
He asked not about text length, but text width (px). – Gabriel Santos May 27 '12 at 07:00
ya guys its not about d not about text length, but text width (px). Pls help – Snehal Kumar Mishra May 27 '12 at 07:47

laurent · Answer 4 · 2012-05-27T11:35:02.590

0

I would split the string in an array, then add letter after letter testing the width of the element to know if it's lower than 50px

ie :

var vElement = $('.your_element');

var vStr = vElement.html();

var vShortStr = "";

var vArray = vStr.split("");

for (var i=0; i<vArray.length; i++){

vShortStr += vArray[i];

vElement.html(vShortStr);

if(vElement.width() > 50){

    vShortStr = vShortStr.substring(0, vShortStr.length-1);

    vShortStr += "...";

    vElement.html(vShortStr);

    break;

    }

}

edited May 27 '12 at 11:35

answered May 27 '12 at 06:55

laurent

505
7
16

hey hii thanks for help bt tried your code bt some how its not working can u show me some working code??? – Snehal Kumar Mishra May 27 '12 at 07:46
I had mistyped a variable in my answer, sorry. It should be working now. – laurent May 27 '12 at 11:34

score 0 · Answer 5 · answered May 27 '12 at 10:27

0

If your text is already enclosed in a block element with 50px width, you can use the text-overflow CSS rule, which is widely supported by virtually all browsers. Also see text-overflow at quirksmode.

answered May 27 '12 at 10:27

lanzz

42,060
10
89
98

How can I replace part of a string which is wider than 50 px with "..."?

5 Answers5