嘿，我完全get到你的需求啦——就是要让多行文本在指定行数截断，同时“查看更多”按钮得跟截断的文本待在同一行末尾，对吧？你之前试的两种方案确实都有小问题：第一种只能处理单行文本，第二种用-webkit-line-clamp实现了多行截断，但按钮却跑到文本下面去了。

别急，咱们用Flex布局结合-webkit-line-clamp就能完美解决这个问题，直接看代码：

CSS 代码 #

.text-container {
  width: 400px;
  display: flex;
  align-items: flex-end; /* 让按钮和文本底部对齐，视觉更和谐 */
  padding: 10px;
}

.truncated-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 这里可以修改成你需要的截断行数 */
  flex: 1; /* 让文本容器占满剩余空间，按钮自然挤到右边 */
  margin-right: 8px; /* 和按钮保持一点间距，不显得拥挤 */
}

.read-more-btn {
  white-space: nowrap; /* 按钮文本不换行 */
  flex-shrink: 0; /* 按钮不会被压缩变形 */
}

HTML 代码 #

<div class="text-container">
  <div class="truncated-text">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </div>
  <button class="read-more-btn">查看更多</button>
</div>

方案关键点说明 #

• flex: 1 是核心：让文本容器占据容器内的所有剩余空间，这样按钮就会自然排列在文本右侧
• -webkit-line-clamp: 2 控制文本在第2行截断，你可以根据需求改成3行、4行都行
• flex-shrink: 0 确保按钮不会因为文本过长被挤压变形，保持原本的大小
• align-items: flex-end 让按钮和文本底部对齐，避免出现按钮和文本中间不对齐的尴尬情况

另外提一句，-webkit-line-clamp是webkit内核的属性，现在Chrome、Safari、新版Edge都支持得很好，如果需要兼容Firefox这类非webkit浏览器，可以考虑搭配JavaScript来实现，不过大部分场景下这个CSS方案足够用啦。

备注：内容来源于stack exchange，提问作者the'Developer'