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

Question

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

有什么好建议吗？

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解决方案不会删除任何内容,所有行都在那里,它们只是不可见.