<div>
<p>This is a sample text.</p>
<p>This is a 2nd sample text. existing inside a paragraph. I want to make this ellipsis to avoid overflow text.</p>
<p>This is a last paragraph which is not going to display as 3 lines are already displayed</p>
</div>
所需输出-
This is a sample text.
This is a 2nd sample text. existing
inside a paragraph. I want to make...
我想通过将所有段落视为单个文本，使div省略号内的文本具有3行。
如何实现？？
我试过跟着一个-
div{
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: initial;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
但是如果div中有多个段落，它就不能正常工作。
可以在p元素上display:contents；:
null
div{
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: initial;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
div p {
display:contents;
}<div>
<p>This is a sample text.</p>
<p>This is a 2nd sample text. existing inside a paragraph. I want to make this ellipsis to avoid overflow text.</p>
<p>This is a last paragraph which is not going to display as 3 lines are already displayed</p>
</div>
尝试使用文本溢出
在css代码中添加以下内容:
p#my-p { text-overlow: ellipsis; }
这有用吗？
对多线使用箝位
摆弄来玩来玩去。
null
.MainDiv {
border: 1px solid black;
width: 200px;
}
p {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}<div class="MainDiv">
<p>This is a sample text.</p>
<p>This is a 2nd sample text. existing inside a paragraph. I want to make this ellipsis to avoid overflow text.</p>
</div>