查找文本将占用多少行

可能发生的一个问题是，即使在不同的版本和不同的操作系统中，字体呈现也可能因浏览器而异。因此，在某种预先计算文本长度/高度时，这并不容易。你可以做这样的事情：

• 创建具有最大高度的字段
• 将此字段的溢出设置为隐藏
• 编写一个执行以下操作的 JavaScript：

__

• 1 获取文本
• 2 切断最后一个单词（使用正则表达式或类似的东西）
• 3 检查容器是否仍有溢出
• 4 执行步骤 2 和 3 很长时间，直到不再
溢出
• 5 再删掉一个词（你仍然可以有这种情况，你没有空间"..."）
• 6 附加"..."

这只适用于您有纯文本的情况。如果你在标题中有标签，这样的事情可能会完全弄乱你的HTML结构。想象一下，这会导致一个开放的""标签永远不会被关闭......:)

您的正则表达式/单词查找器也应该非常聪明，可以删除诸如"单词分隔"之类的内容。

我不知道这是否是一个非常好的方法，但也许有点帮助，因为使用 jQuery 这只会是 4-5 行。

我最终做了这样的事情：

<p id="titleContainer">blabla bla bla blablabla bla blabla bla bla blablabla bla blabla bla bla blablabla bla</p>
<script type="text/javascript">
  function checkOverflow(el){
    var curOverflow = el.style.overflow;
    if ( !curOverflow || curOverflow === "visible" ){
      el.style.overflow = "hidden";
    }
    // 26 pixels was the height of 2 lines
    var isOverflowing = el.scrollHeight > 26;
    el.style.overflow = curOverflow;
    return isOverflowing;
  }
  var titleContainer = document.getElementById("titleContainer");
  var titleTxt = titleContainer.innerHTML + "...";
  while(checkOverflow(titleContainer)){
    titleTxt = titleTxt.replace(/ [^ ]+'.'.'.$/, "...");
    titleContainer.innerHTML = titleTxt;
  }
</script>

您需要尝试一下您的设计，看看大约有多少字符等于两行。如果您没有使用固定字体，则必须查看一堆案例。

我使用此功能在我的一个站点上执行此操作。这会修剪到特定的最大字符数，然后在字符串末尾之前的第一个空格处断开字符串。

function str_tr($string,$max)
{
 if(strlen($string)>$max)
 {
    $string = substr($string,0,$max);
    $i = strrpos($string," ");
    $string = substr($string,0,$i);
    $string .= "...";
 }
 return $string;
}

正如@cpilko所说...如果它不是固定大小的字体...它肯定行不通...

30 i（小字符）与 w（大字符）在非固定字体中

三

wwwwww

但是，在固定大小的字体中...事情更可预测：

iiiiiiiiiiiiiiiiiiiiiiiiiiiiii
wwwwwwwwwwwwwwwwwwwwwwwwwwwwww

你需要

的是text-overflow CSS属性。 它使用 CSS 截断固定宽度容器中的多余文本，并将溢出替换为省略号字符。 阅读更多：

http://www.quirksmode.org/css/textoverflow.html