在javascript中可以使用css3线夹吗？

Question

目前为了垂直限制文本框,并添加省略号,只有一个使用line-clamp&box-orient的webkit css3解决方案.

演示(野生动物园或铬):http://jsfiddle.net/ArKeu/136/

现在这在其他任何地方都不受支持,甚至不使用前缀.所以我的问题是,是否可以在纯JavaScript中轻松完成此操作.简而言之,让一个句子在多行上流动,并在添加省略号的同时添加一个句子.

谢谢你的帮助.

Answer 1

我修改了代码表单这个答案是纯JS.您没有指定行数,而是指定框的高度.您可以通过乘以行数来轻松地根据行数计算高度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