javascript - 将html文本适当 chop 到固定大小的区域

Question

在生成的 html 页面中，我们有一个固定大小的区域(假设为 200 x 300)，我们需要在其中容纳尽可能多的文本(如常规文本段落)，如果它不适合, 删除适当数量的字符并在末尾附加“...”。

文本不是固定大小的字体，虽然我们为此文本使用一种特定字体，但显然首选“通用”解决方案。

这看起来很有趣，但我认为为页面上的多个元素调用此函数会非常慢 - http://bytes.com/topic/javascript/answers/93847-neatly-truncating-text-fit-physical-dimension

该解决方案可以根据需要混合使用 html、css、js 和 php。

非常欢迎就方法提出建议!

Answer 1

我会说您找到的解决方案是最好的。例如，它用于 jQuery plugin当您在其中输入文本时，它会自动调整文本区域的大小。我采用了这个概念，并用 jQuery 重写了它，以进行这里的简单测试:http://jsfiddle.net/ZDr5K/

var para = $('#para');
var height = 200;

while(para.height() >= height){
    var text = para.text();

    para.text(text.substring(0, text.length - 4) + '...');
}

如果最后一个字符是句号，可能的改进包括正确 trim 和删除句点。逐字删除也将更具可读性/稍微快一些。

至于多次运行的函数，那是在所难免的。在这里，您真正可以用 CSS 做的唯一事情是使用 :after 附加省略号，但即使这样也应该避免交叉兼容性问题。