5

Currently to limit a text box vertically, and add ellipsis, there only is a webkit css3 solution using line-clamp & box-orient.

Demo (safari or chrome): http://jsfiddle.net/ArKeu/136/

Now this is not supported anywhere else, not even using prefixes. So my question is if it is possible to do this easily in pure javascript. In short, let a sentence flow on multiple lines and add stop it after a couple while adding ellipsis.

Thanks for your help.

cmplieger
  • 7,155
  • 15
  • 55
  • 83
  • possible duplicate of [With CSS, use "..." for overflowed block of multi-lines](http://stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-multi-lines) – sachleen Aug 08 '12 at 01:29
  • Also http://stackoverflow.com/questions/3404508/cross-browsers-mult-lines-text-overflow-with-ellipsis-appended-within-a-widthhe – sachleen Aug 08 '12 at 01:30
  • yes but that is all jQuery :( – cmplieger Aug 08 '12 at 02:01

1 Answers1

12

I modified the code form this answer to be pure-JS. You don't specify the number of lines, but the height of the box. You can easily calculate height from number of lines by multiplying number of lines by line-height.

HTML

<div id="fos">
    <p>text here</p>
</div>​

JavaScript

var container = document.getElementById("fos");
var containerHeight = container.clientHeight;
var para = container.children[0];

while (para.clientHeight > containerHeight) {
    para.innerText = para.innerText.replace(/\W*\s(\S)*$/, '...');
}

DEMO

Community
  • 1
  • 1
sachleen
  • 30,730
  • 8
  • 78
  • 73