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