如何制作包含多个段落的div省略号？

Question

<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>
 <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 中有多个段落，它就无法按预期正常工作。

Answer 1

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