adding ellipsis using height and width

Question

I am trying to add ellipsis on multiline using javascript with the below code. It is working for most of the cases except for one case where the text width is the same as the width of the cell. I wasn't able to not add ellipsis in that case. So I need to check the width as well.

while ($(this).height() > 60) {
  $(this).text(function (index, text) {
    return text.replace(/\W*\s(\S)*$/, '...');
  });
}

Curious why you're not using CSS `text-overflow: ellipsis` instead. — Paul Roub, Jun 25 '14 at 16:22
I guess I can't really understand what are the special needs here. Maybe an image will help — Itay, Jun 25 '14 at 16:27

score 0 · Answer 1 · answered Jun 25 '14 at 16:32

0

Try a container with overflow:hidden to add an ellipsis to an innner paragraph tag that overflows.

var $container = $(container);
    var $p = $container.find("p");
    var divh = $container.height();

    while ($p.outerHeight()>divh) {
        $p.text(function (index, text) {
            return text.replace(/\W*\s(\S)*$/, '...');
         });
    }

answered Jun 25 '14 at 16:32

jgreenberg

478
1
4
17

thanks for reply..i am using overflow:hidden only. But the issue is the last visible line doesnt have the ellipsis when the text overflows if the last visible line is equal to the width of the column. – user3496151 Jun 25 '14 at 17:07
last word is cut off and ellipsis is not visible – user3496151 Jun 25 '14 at 17:08
I don't understand your issue, is it up somewhere I could see it? – jgreenberg Jun 26 '14 at 16:43

adding ellipsis using height and width

1 Answers1