如何让 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{
 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内有多个段落，它不能正常工作，如预期。

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>

Answer 2

尝试使用 text-overflow

在你的css代码中添加这个。

p#my-p { text-overlow: ellipsis; }

这有帮助吗？

Answer 3

使用 clamp 对于 多行

抚弄 来玩耍。

.MainDiv {
  border: 1px solid black;
  width: 200px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.MainDiv p {
  overflow: hidden;
}

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

你可以这样做 单行

.MainDiv {
  border: 1px solid black;
  width: 200px;
}

p {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 200px;
  white-space: nowrap;
}

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