6

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

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

有什么好的建议吗？

4

3 回答 3

5

您应该在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 行，如果是，则动态添加/显示元素。

Note that a css solution does not remove anything, all lines are there, they are just not visible.

于 2012-12-20T14:03:22.633 回答
0

There is a pure CSS Solution working in most of the modern browsers (some older firefox versions didn't support it):

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

Doing something like this in PHP could be a bit more complex, depending on what the DIV contains (nested HTML?, what exactly is a "line" for you -> a HTML break <br>, a line-break \n)? In most of the cases the PHP solutions split after a defined String or Word length. You can find quite a few examples for this kind of text limitations, this one is a complex solution which can handle html tags too.

于 2012-12-20T14:22:02.530 回答
-1

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

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

echo '<div>'$lines[0].'<br>'.$lines[1].'<br>...</div>'
于 2012-12-20T14:03:03.343 回答