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

我希望只保留前两行,如果存在更多行,则必须将它们删除并替换为文本行div作为新的(因此是第三行)文本行。
换言之:我希望找到第二个换行符(如果存在),并用一个文本行替换该点之后的所有文本,该文本行表示...
因此,如果我有两行文本,则不会更改任何内容:
text text text
text text text

但是如果我有两行以上的话,我会得到:
text01 text02 text03
text04 text05 text06
...

有什么好建议吗?

最佳答案

您应该在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行,如果超过2行,则动态添加/显示元素。
请注意,CSS解决方案不会删除任何内容,所有行都存在,它们只是不可见。

07-24 09:50
查看更多