如何用CSS实现4行文本截断后省略号旁显示Read more链接且单词正常折行

这个需求完全可以仅通过CSS实现，你遇到的单词折行异常是原有写法的逻辑缺陷导致的，调整样式即可解决。

原有写法的问题 #

• 绝对定位的「Read more」悬浮在文本右下角，没有提前预留显示空间，会遮挡最后一行的末尾文本，直接导致单词被异常截断
• 原生-webkit-line-clamp会自动生成省略号，和你手动在read-more::before里加的省略号重复，和预期效果不符

优化后的完整代码 #

CSS部分 #

.container {
  width: 800px;
  position: relative;
  line-height: 1.5; /* 固定行高方便对齐计算 */
}

.text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-right: 110px; /* 给Read more预留足够显示空间，避免遮挡文本 */
  overflow-wrap: break-word; /* 保证长单词正常折行，不会硬截断 */
  word-wrap: break-word; /* 兼容旧版浏览器 */
  position: relative;
}

/* 遮挡原生line-clamp生成的省略号，避免重复 */
.text::after {
  content: '';
  position: absolute;
  right: 110px;
  bottom: 0;
  width: 1em;
  height: 1.5em; /* 高度和行高保持一致，刚好遮挡最后一行的省略号 */
  background: #fff; /* 和文本背景色保持一致 */
}

.read-more {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
}

.read-more::before {
  content: '...';
  margin: 0 5px;
}

HTML部分 #

和你原有代码完全一致，无需修改：

<div class="container">
  <div class="text">This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing.
    This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing.
    This is the issue with this approach</div>
  <div class="read-more">
    <a href="">Read More ></a>
  </div>
</div>

核心优化点 #

1. 提前给文本容器加右侧内边距预留「Read more」的显示位置，彻底解决文本被遮挡导致的单词折行异常问题
2. 新增同背景色的伪元素遮挡原生line-clamp生成的省略号，仅保留手动添加的省略号，避免重复显示
3. 增加折行规则配置，保证所有长度的单词都可以正常折行，不会出现溢出、硬截断的问题

该方案依赖-webkit-line-clamp特性，目前Chrome、Safari、Edge等主流浏览器均已支持，可覆盖绝大多数使用场景。

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