Find how many lines a text will occupy

Question

I have a product listing, in which the title of the product is written. What I want to do is check if the product title is longer than 2 lines, and in that case, print just enough to fit in 2 lines and put "..." in the end.

Any ideas?

[What have you tried?](http://whathaveyoutried.com/) – sczizzo Jun 15 '12 at 00:56 — sczizzo, Jun 15 '12 at 00:56

insertusernamehere · Accepted Answer · 2012-06-15T08:29:35.120

One problem that can occur is that the font rendering can be different from browser to browser even in different versions and also on different operation systems. So it's not so easy when it comes to some sort of pre-calculating the text length/height. You could do something like this:

create a field with the maximum height
set this field's overflow to hidden
write a javascript that does the following:

__

1 get the text
2 cut off the last word (using a regex or something like that)
3 check whether the container still has overflow
4 do step 2 and 3 so long until there is no more overflow
5 cut off one more word (you could still have the case, that you don't have space for "…")
6 append "…"

This one only works if you have a plain text. Something like this could totally mess up your HTML-structure if you have tags within the title. Imagine this results in an open "<span>"-tag that never gets closed … :)

Your regex/word finder should also be so clever to cut out things like "words-separated".

I don't know whether this is a very good approach, but maybe a little help, because with jQuery this would only be something like 4-5 lines.

This one sounds interesting. i try to avoid using jQuery so i will try this. I think though that it's better to initially append "..." and then remove the last word with regex. This way, you avoid a situation where the last word is let's say 1-2 characters and there is no more space, and you delete that and try to add 3 characters for "...", in which case one dot will still overflow. — Leandro Zhuzhi, Jun 15 '12 at 12:23
Yeah, the example above could be optimized in that way. I found a solution, which has the smallest code possible here: http://jsfiddle.net/MPkSF/151/ — insertusernamehere, Jun 15 '12 at 13:51

score 1 · Answer 2 · answered Jun 15 '12 at 18:55

I ended up doing something like this:

<p id="titleContainer">blabla bla bla blablabla bla blabla bla bla blablabla bla blabla bla bla blablabla bla</p>

<script type="text/javascript">
  function checkOverflow(el){
    var curOverflow = el.style.overflow;
    if ( !curOverflow || curOverflow === "visible" ){
      el.style.overflow = "hidden";
    }

    // 26 pixels was the height of 2 lines
    var isOverflowing = el.scrollHeight > 26;
    el.style.overflow = curOverflow;
    return isOverflowing;
  }

  var titleContainer = document.getElementById("titleContainer");
  var titleTxt = titleContainer.innerHTML + "...";

  while(checkOverflow(titleContainer)){
    titleTxt = titleTxt.replace(/ [^ ]+\.\.\.$/, "...");
    titleContainer.innerHTML = titleTxt;
  }
</script>

score 0 · Answer 3 · answered Jun 15 '12 at 01:00

You'll need to play around with your design to see approximately how many characters will equal two lines. If you're not using a fixed-with font, you'll have to look at a bunch of cases.

I use this function to do this on one of my sites. This trims to a certain max number of characters, then breaks the string at the first space before the end of the string.

function str_tr($string,$max)
{
 if(strlen($string)>$max)
 {
    $string = substr($string,0,$max);
    $i = strrpos($string," ");
    $string = substr($string,0,$i);
    $string .= "...";
 }
 return $string;
}

score 0 · Answer 4 · answered Jun 15 '12 at 01:14

As @cpilko said… if it's not a fixed size font… it won't work for sure…

30 i (small char) versus w (big char) in non fixed fonts

iiiiiiiiiiiiiiiiiiiiiiiiiiiiii

wwwwwwwwwwwwwwwwwwwwwwwwwwwwww

But, in fixed size fonts… things are more predictable:

iiiiiiiiiiiiiiiiiiiiiiiiiiiiii
wwwwwwwwwwwwwwwwwwwwwwwwwwwwww

score 0 · Answer 5 · answered Jun 15 '12 at 02:33

0

What you need is the text-overflow CSS property. It uses CSS to cut off excess text in a container of a fixed width and replaces the overflow with an ellipsis character. Read more at:

http://www.quirksmode.org/css/textoverflow.html

answered Jun 15 '12 at 02:33

austincheney

1,189
9
11

that only works with one line, i want it to work with 2 lines – Leandro Zhuzhi Jun 15 '12 at 15:57

Find how many lines a text will occupy

5 Answers5