Php 查找文本将占用的行数

我有一个产品清单，上面写着产品的名称。我想做的是检查产品名称是否超过2行，在这种情况下，打印刚好可以容纳2行，并在末尾添加“…”

---

有什么想法吗？

您需要仔细研究一下您的设计，看看大约有多少个字符将等于两行。如果你没有使用固定字体，你必须看一大堆案例

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

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

---

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

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

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

__

• 我得到文本
• 2切掉最后一个单词（使用正则表达式或类似的东西）
• 3检查容器是否仍有溢出
• 4执行第2步和第3步，直到不再有溢出为止
• 5再剪掉一个单词（你仍然可以保留这个案例，因为你没有空间放“…”）
• 6附加“…”

只有当您使用纯文本时，此选项才有效。如果在标题中有标记，这样的事情可能会完全破坏HTML结构。想象一下，这将导致一个永远不会关闭的打开的“”标记…：）

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

---

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

正如@cpilko所说的那样……如果不是固定大小的字体……它肯定不会工作

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

IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII

wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

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

iiiiiiiiiiiiiiiiiiiiiiiiiiiiii
wwwwwwwwwwwwwwwwwwwwwwwwwwwwww

---

您需要的是文本溢出CSS属性。它使用CSS切断固定宽度容器中多余的文本，并用省略号字符替换溢出的文本。更多信息请访问：

---

我最后做了这样的事情：

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

等等等等等等等等等等等等等等
函数检查溢出（el）{
var curOverflow=el.style.overflow；
如果（！curOverflow | | curOverflow==“可见”）{
el.style.overflow=“隐藏”；
}
//26像素是2行的高度
var Isoverflow=高程>26；
el.style.overflow=电流溢出；
回流等溢流；
}
var titleContainer=document.getElementById（“titleContainer”）；
var titleTxt=titleContainer.innerHTML+“…”；
while（检查溢出（标题容器））{
titleTxt=titleTxt.replace（/[^]+\.\.\.$/，“…”）；
titleContainer.innerHTML=titleTxt；
}

如何定义“两行”？这一行听起来很有趣。我尽量避免使用jQuery，所以我会尝试这个。我认为最好先加上“…”，然后用正则表达式删除最后一个单词。这样，你就避免了最后一个字是1-2个字符，没有更多的空间的情况，你删除它，并尝试为“…”添加3个字符，在这种情况下，一个点仍然会溢出。是的，上面的例子可以通过这种方式进行优化。我找到了一个解决方案，它有尽可能最小的代码：只适用于一行，我希望它能适用于两行