如何实现带后缀按钮的两行文本省略卡片（HTML/CSS/JS）

嘿，这个需求完全不用JS，纯CSS+HTML就能搞定！先说说你之前踩的坑：

• 把按钮塞到p标签里消失，是因为-webkit-line-clamp的截断逻辑会把超出两行的内容直接隐藏，按钮被当成文本的一部分给“吞”了
• 按钮放p外面换行，是因为p是块级元素，默认占满整行，按钮自然只能另起一行

咱们换个布局思路就能完美解决，核心是用flex布局把文本和按钮绑定到一起，同时保证文本能触发两行截断。直接上可运行的代码方案：

实现代码 #

HTML结构

<div class="card">
  <div class="text-btn-group">
    <span class="truncated-content">lost all your money, choose and select a rare card</span>
    <button class="action-btn">good</button>
  </div>
</div>

CSS样式

.card {
  width: 120px;
  height: 80px;
  border: 1px solid black;
  border-radius: 8px;
  padding: 0 4px;
  background: white;
  display: flex;
  align-items: center; /* 让内容垂直居中，可根据需求调整 */
}

.text-btn-group {
  display: flex;
  align-items: flex-start; /* 按钮和文本顶部对齐，更自然 */
  width: 100%;
}

.truncated-content {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1; /* 让文本占满剩余空间，把按钮挤在右侧 */
  min-width: 0; /* 关键属性！flex子元素默认不会收缩到触发截断，加这个才能让文本正常截断 */
}

.action-btn {
  flex-shrink: 0; /* 按钮不被压缩，保持原有的大小 */
  margin-left: 4px; /* 和文本留点间距，视觉更舒服 */
}

关键细节解释 #

• flex: 1 让文本容器占满除按钮外的所有空间，保证按钮始终在右侧
• min-width: 0 是flex布局的小技巧，默认flex子元素不会收缩到小于内容宽度，加这个才能让文本容器触发-webkit-line-clamp的截断逻辑
• flex-shrink: 0 确保按钮不会被压缩变形，始终显示完整

如果遇到极端场景（比如按钮必须紧跟在最后一行文本的末尾，哪怕文本没满两行），那可能需要JS辅助计算文本高度，但90%的场景下上面的纯CSS方案就足够用了。

内容来源于stack exchange