无法为多行段落获取省略号 [重复]

Posted 2023-03-04

【中文标题】无法为多行段落获取省略号 [重复]

【英文标题】：Unable to get ellipsis for Multiline Paragraph [duplicate]

【发布时间】：2021-11-25 09:33:11

【问题描述】：

我有一个文本块，我想在其中获得 4/5 行的省略号 但如果我使用

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

在段落标签中，我只得到一行的省略号 我希望我的段落看起来像这样

【参考方案1】：

由于 CSS 中的 line-clamp 属性，这非常容易做到。 就用这个吧：

overflow: hidden;
text-overflow: ellipsis;
line-clamp: 5; /* you can keep it any thing*/
white-space: nowrap;

所以，line-clamp 将做的是让段落在添加省略号之前进入特定行数。 更多信息在这里：css-tricks line-clamp

网站上这个问题的答案是这样的：

.line-clamp 
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;

<p class="line-clamp">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>