带有房间“阅读更多”的CSS多行文本省略号？

【问题标题】：CSS multi-line text ellipsis with room "read more"?带有房间“阅读更多”的CSS多行文本省略号？
【发布时间】：2017-03-14 02:13:08
【问题描述】：

我想知道是否有一个纯 CSS 解决方案，让段落以 ellipsis 结尾，但也让在同一行文本的最后添加一个“阅读更多”链接。

例如。

正则省略号

Ultrices natoque mus mattis, aliquam, cras in pellentesque tincidunt elit purus lectus, vel ut aliquet, elementum...

“阅读更多”

Ultrices natoque mus mattis, aliquam, cras in pellentesque tincidunt elit purus lectus, vel ut aliqu... 阅读更多 >

【问题讨论】：

可能重复：Applying an ellipsis to multiline text
这个 2021 年有人在 css 或 js 解决方案上得到任何关于这个问题的解决方案吗？

标签： css

【解决方案1】：

这是一次尝试。它可以工作，尽管您可能需要调整 <a> 上的样式以适应字体更改等

.truncate {
  display: inline-block;
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.truncate + a {
display: inline-block;
  vertical-align: top;
  margin-top: -1px;
}

<div id="container">
  <p><span class="truncate">This is a text that should be truncated because it's too long</span><a href="#">Read more</a></p>
  </div>

【讨论】：

这种方法的问题是<a href="#">Read more</a>总是需要被包含。如果您有一些内容太长的帖子，这很好。但是，如果您也有一些没有内容或内容小于需要截断的宽度的帖子，则会出现“阅读更多”，这是不希望的。