2

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

有任何想法吗？

4

5 回答 5

5

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

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

__

  • 1 获取文本
  • 2 切断最后一个词（使用正则表达式或类似的东西）
  • 3 检查容器是否还有溢出
  • 4 执行第 2 步和第 3 步，直到不再溢出为止
  • 5 再删掉一个词（你仍然可以有这样的情况，你没有空间用于“…”）
  • 6 附加“……”

这个只有在你有纯文本时才有效。如果标题中有标签，这样的事情可能会完全弄乱您的 HTML 结构。想象一下，这会导致打开的“<span>”标签永远不会关闭……:)

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

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

于 2012-06-15T01:09:54.730 回答
1

我最终做了这样的事情：

<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>
于 2012-06-15T18:55:15.660 回答
0

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

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

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;
}
于 2012-06-15T01:00:29.533 回答
0

正如@cpilko 所说......如果它不是固定大小的字体......它肯定不会工作......</p>

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

iiiiiiiiiiiiiiiiiiiiiiiiiiiiii

wwwwwwwwwwwwwwwwwwwwwwwwwwwwww

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

iiiiiiiiiiiiiiiiiiiiiiiiiiiiii
wwwwwwwwwwwwwwwwwwwwwwwwwwwwww
于 2012-06-15T01:14:19.673 回答
0

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

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

于 2012-06-15T02:33:29.697 回答