Question

我想知道是否有一个仅限CSS的解决方案，让一个以ellipsis结尾的段落，还要在同一行文本的最后添加一个“read more”链接。

例如

常规省略号

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 ...阅读更多＆gt;

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

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

1 个答案: