Question

我有一个产品清单，其中写有产品的标题。我想要做的是检查产品标题是否超过2行，在这种情况下，打印刚好足以适合2行，并在最后加上“...”。

有什么想法吗？

Answer 1

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

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

__

1获取文字
2切断了最后一个字（使用正则表达式或类似的东西）
3检查容器是否仍有溢出
4执行步骤2和3，直到没有更多溢出
5切断了一个字（你仍然可以得到这个案例，你没有“...”的空间）
6追加“......”

这个只有你有一个纯文本才有效。如果你在标题中有标签，这样的东西可能会完全破坏你的HTML结构。想象一下这会产生一个打开的“＆lt; span＆gt;” - 永远不会被关闭的标签......：）

你的正则表达式/单词查找器也应该如此聪明地删除诸如“单词分隔”之类的内容。

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

Answer 2

我最终做了这样的事情：

<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>

Answer 3

您需要使用您的设计来查看大约有多少个字符等于两行。如果您不使用固定字体，则必须查看大量案例。

我使用此功能在我的某个网站上执行此操作。这将修剪为一定的最大字符数，然后在字符串结尾之前的第一个空格处中断字符串。

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;
}

Answer 4

正如@cpilko所说......如果它不是固定大小的字体......那肯定不会有用......

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

iiiiiiiiiiiiiiiiiiiiiiiiiiiiii

wwwwwwwwwwwwwwwwwwwwwwwwwwwwww

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

iiiiiiiiiiiiiiiiiiiiiiiiiiiiii
wwwwwwwwwwwwwwwwwwwwwwwwwwwwww

Answer 5

您需要的是文本溢出CSS属性。它使用CSS来剪切固定宽度的容器中的多余文本，并用省略号字符替换溢出。阅读更多内容：

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

查找文本占用的行数

5 个答案: