Question

在生成的html页面中，我们有一个固定大小的区域（比方说200 x 300），我们需要在其中插入尽可能多的文本（如常规段落的文本），如果它不适合，删除适当数量的字符并在末尾添加“...”。

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

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

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

非常欢迎有关方法的建议！

Answer 1

通过CSS设置元素尺寸，将其溢出设置为“隐藏”。

然后，找出这个函数，如果元素的内容溢出（via）：

// Determines if the passed element is overflowing its bounds,
// either vertically or horizontally.
// Will temporarily modify the "overflow" style to detect this
// if necessary.
function checkOverflow(el)
{
   var curOverflow = el.style.overflow;
   if ( !curOverflow || curOverflow === "visible" )
      el.style.overflow = "hidden";

   var isOverflowing = el.clientWidth < el.scrollWidth 
      || el.clientHeight < el.scrollHeight;

   el.style.overflow = curOverflow;

   return isOverflowing;
}

现在，在循环中删除文本并检查，直到它不再溢出。将省略号字符（String.fromCharCode(8230)）附加到末尾，但前提是它溢出。

为了避免在该操作期间出现任何闪烁效果，您可以尝试处理元素的隐藏副本，但我不确定浏览器是否对不可见的元素进行必要的布局计算。（任何人都可以澄清一下吗？）

Answer 2

我会说你找到的解决方案是最好的。例如，它用于此jQuery plugin，它会在您输入文本时自动调整textareas。我接受了这个概念并用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) + '...');
}

可能的改进包括正确修剪和删除句点，如果最后一个字符是句号。逐字删除也会更可读/更快。

对于多次运行的功能，这是不可避免的。你在这里用CSS真正做的唯一事情就是使用:after来附加省略号，但是对于交叉兼容性问题，应该避免这种情况。

将html文本适当地截断为固定大小的区域

2 个答案: