Is css3 line clamp possible in javascript?

Question

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.

Answer 1

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