如何实现包含多段落文本的 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内部有多个段落，它的功能可能无法正常工作。

- Omkar Patil

---

所以基本上如果有足够的空间，应该有两行，当空间不足时，它应该分成两行？这不应该是默认行为吗？ - Gh05d

我认为他的意思是有两段文字，但希望它们显示在某个地方时应该是3行，第三行应该是省略号。 - Aniket Patil

Answer 1

考虑在 p 元素上添加 display:contents;, 并结合使用伪元素技巧来保持段落间的分隔。

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>

- Temani Afif

---

嘿，谢谢兄弟。这很好用，但它直接将所有段落组合在一起。但我也想保留段落的下一行功能。你有什么解决办法吗？ - Omkar Patil

是的，但它需要额外的一行。 - Omkar Patil

此外，您可以将display: block应用于伪元素，以使其占据额外的一行空间。 - Sigurd Mazanti

@SigurdMazanti 这将总共生成6行，对于这种情况不太好，因为文本的最后一行将被隐藏。 - Temani Afif

因为你可能想在每个<p>元素之间添加空格，就像在任何所见即所得编辑器中按下enter键一样。line-height会影响所有文本行，而不仅仅是<p>元素之间的间距。 - Sigurd Mazanti

Answer 2

使用 clamp 处理 多行文本

fiddle 进行测试。

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

- Manjuboyz

---

你能否再次检查我的问题？ - Omkar Patil

实际上，我从数据库中获取这些段落作为文本，并将其附加在div中。因此，我无法决定要考虑哪个文本以及隐藏什么，因为有多个段落。 - Omkar Patil

我编写的代码适用于所有的 p，因此即使它是动态值，你也将在第三行看到 ellipse，这是你的要求，你也可以进行测试。如果你想查看，这里是 fiddle 链接：https://jsfiddle.net/Manju06/8r67hpw2/ - Manjuboyz

在你的回答中，我实际面临的问题是它单独为每个段落考虑此CSS，并在文本溢出时显示所有段落的3行省略号。但是我想像我的问题一样将所有段落放在一起考虑省略号。 - Omkar Patil

那么你想要什么，是在“div”上发生？ - Manjuboyz

呀..我想把它应用在 div 上。 - Omkar Patil