如何使div省略号里面有多个段落？

debugcn 发表于 Dev

奥卡·帕蒂尔（Omkar Patil）

<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: 200px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: initial;
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
}

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

但是，如果div中有多个段落，它将无法正常工作。

陪同Afif

考虑display:contents;在p元素上结合伪元素技巧，以保持p之间的分隔

div {
  width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: initial;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

div p {
  display: contents;
}

p:after {
  content: "\A";
  white-space:pre;
}

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。