如何在两行截断文本末尾添加href链接而非替换末尾字符

修正HTML结构 #

先修复原代码里的无效标签，再把「Read more」链接嵌入内容容器内部：

<div class="post--content">
  Lorem ipsum dolor sit amet, consectetur adipiscing.Lorem vipsumdolor sit amet,nconsectetur adipiscing.Lorem ipsum dolor sit amet,nconsectetur adipiscing.Lorem ipsum dolor sit amet,nconsectetur adipiscing.Lorem ipsum dolor sit amet,nconsectetur adipiscing.
  <a href="link" target="_blank" class="read-more">Read more</a>
</div>

调整CSS样式 #

通过-webkit-line-clamp实现两行截断，同时保证链接紧跟文本流，不会单独换行：

.post--content {
  max-width: 300px;
  line-height: 1.5; /* 用相对行高适配不同字体大小 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.read-more {
  white-space: nowrap; /* 禁止链接换行 */
  margin-left: 0.25em;
  color: #0066cc;
  text-decoration: none;
}

.read-more:hover {
  text-decoration: underline; /* hover时显示下划线提升交互性 */
}

效果说明 #

• 文本长度超两行时，-webkit-line-clamp自动截断内容，「Read more」链接会显示在第二行末尾，和截断文本融为一体。
• 文本长度不足两行时，链接紧跟文本之后，自然嵌入段落，不会单独占一行。

注：-webkit-line-clamp是webkit内核属性，Chrome、Safari等现代浏览器均支持；如需兼容Firefox等其他浏览器，可结合JavaScript计算文本高度实现类似效果。

内容的提问来源于stack exchange，提问作者DaroGawlik