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

Question

目前要垂直限制文本框并添加省略号，只有使用 line-clamp 和 box-orient 的 webkit css3 解决方案。

演示（Safari 或 chrome）：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)*$/, '...');
}

演示