保留前两行文本，删除其余所有内容。

Question

保留前两行文本，删除其余所有内容。

6

在一个 <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
...

有什么好的建议吗？

- Steeven

2

在PHP端（即服务器端）进行此操作并不容易，因为行大小将取决于客户端分辨率的不同。 - xlecoustillier

所以需要一些 JavaScript 吗？ - Steeven

我已经编辑并添加了jQuery标签。谢谢。 - Steeven

即使使用JavaScript，要正确实现这个功能也很困难。你基本上需要在一行中计算文本宽度，然后需要获取所需div宽度与实际文本宽度之间的差异，最后近似计算字符数以进行调整。 - JaredMcAteer

3个回答

0

有一个纯CSS的解决方案，在大多数现代浏览器中运行（一些旧版火狐不支持）：

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

在PHP中这样做可能会更加复杂，这取决于DIV包含什么（嵌套的HTML？对于您来说，“行”到底是什么 -> HTML换行符<br>，还是换行符\n）？在大多数情况下，PHP解决方案会在定义的字符串或单词长度之后进行拆分。您可以找到很多这种文本限制的示例，这个是一个可以处理HTML标记的复杂解决方案。

- axel.michel

“省略号”听起来比它实际上更好，它只适用于单行而不是多行。 - jeroen

这是纯文本的文本行，没有HTML。如果“省略号”在垂直方向上也能起作用，那就太完美了。虽然我现在还无法做到这一点... - Steeven

是的，你说得对，我忘记了。省略号在多行文本中仍然无法使用。 - axel.michel

有一款适用于多行省略的jQuery插件http://dotdotdot.frebsite.nl/，只要CSS无法满足您的需求。 - axel.michel

-1

你可以使用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>'

- Tuim

但是，如果我的文本行只是：$content = 'Hello World Other Stuff'; 没有任何 <br>，那么脚本是否能够选择自动添加的 \n？ - Steeven

你可以使用 nl2br($content); - Tuim

我无法让它工作。使用 $a=explode('<br>',nl2br($content)); echo count($a) 进行计数只会计算文本中已经存在的换行符。它无法识别由于将文本包装在 div 中而引起的换行符。 - Steeven

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jeroen · Accepted Answer

你需要在 CSS 中完成此操作，必要时添加 JavaScript 代码。

在 CSS 中，你可以设置：

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

那将会把方框缩小到所需的高度。如果您总是想显示“...”（如果内容始终超过2行），只需在您的

后面添加一个带有三个点的元素即可。如果您想添加另一行带有“...”的内容，如果内容大于您正在显示的内容，则需要使用javascript来计算原始高度，查看它是否超过2行，并在必要时动态添加/显示元素。请注意，CSS解决方案不会删除任何内容，所有行都存在，只是不可见。