Question

在<div>我有一些文字。由于div - 宽度，文本以多行显示。例如。以下代码：

<div>text01 text02 text03 text04 text05 text06 text07 text08 text09 text10 text11 text12</div>

可能会在例如四行：

text01 text02 text03
text04 text05 text06
text07 text08 text09
text10 text11 text12

我希望只保留前两行，如果还有其他行，则必须将其删除并替换为文本行...作为新的（因此第三行）文本行。
换句话说：我希望找到第二个换行符（如果存在）并在此点之后用文本行替换...之后的所有文本。

所以，如果我有两行文字，则没有任何改变：

text text text
text text text

但如果我有两行以上，我会得到这个：

text01 text02 text03
text04 text05 text06
...

有什么好建议吗？

Answer 1

您应该在 css 中执行该操作，并在必要时添加javascript。

在css中你可以设置：

.two-line-div {
  max-height: 3em;    /* or whatever adds up to 2 times your line-height */
  overflow: hidden;
}

这会将盒子缩小到所需的高度。

如果您始终想要显示...（如果内容总是超过2行），只需在div之后添加一个带有三个点的元素。

如果要添加另一行...，如果内容大于您显示的内容，则需要javascript来计算原始高度，看看它是否超过2行并添加/显示如果它是动态元素。

请注意，css解决方案不会删除任何内容，所有行都在那里，它们只是不可见。

Answer 2

在大多数现代浏览器中都有一个纯CSS解决方案（一些较旧的firefox版本不支持它）：

div {
    overflow: hidden; /* "overflow" value must be different from "visible" */
    text-overflow: ellipsis; /* the magic dots...*/
    height: <yourHeightValue>
    width: <yourWidthValue>
}

在PHP中做这样的事情可能会有点复杂，具体取决于DIV包含的内容（嵌套HTML？，对于你来说究竟是什么“行” - ＆gt; HTML break＆lt; br＆gt;，一行 - 打破\ n）？在大多数情况下，PHP解决方案在定义的字符串或字长度之后拆分。你可以找到很多这种文本限制的例子，this one是一个复杂的解决方案，也可以处理html标签。

Answer 3

您可以使用explode()将字符串（div的内容）拆分为数组。使用<br>或/n作为拆分令牌。然后，您可以使用数组的前两个元素替换div的内容。

$content = 'Hello<br>World<br>Other<br>Stuff';
$lines = explode('<br>',$content,2);

echo '<div>'$lines[0].'<br>'.$lines[1].'<br>...</div>'

保留两个第一个文本行，删除其他所有内容

3 个答案: