如何实现文本最多两行截断且父组件自动适配宽度以消除留白

我太懂你的困扰了——想要文本最多显示两行并截断，同时让按钮能跟着文本内容自动调整宽度，把多余的留白都挤掉对吧？之前你分开试了flex自适应和两行截断，结果没法同时满足，我来帮你把这俩功能结合起来~

核心问题其实出在flex子元素的默认行为上：flex容器里的子元素默认有min-width: auto，会撑满自身内容的宽度，导致文本截断的属性没法生效。咱们只需要调整几个关键样式，就能同时实现两个需求：

修改后的完整代码 #

HTML

<button class="btn">
  <span>Extended Text Overflowing overflow</span>
</button>

<button class="btn">
  <span>Short Text</span>
</button>

CSS

.btn {
  max-width: 220px;
  height: 50px;
  padding: 0 30px;
  display: inline-flex; /* 让按钮根据内部内容自适应宽度 */
  align-items: center; /* 保证文本在按钮里垂直居中 */
}

.btn span {
  flex: 1; /* 让文本区域占满按钮的可用空间 */
  min-width: 0; /* 关键！取消flex子元素的最小宽度限制，否则截断失效 */
  display: -webkit-box;
  hyphens: auto;
  overflow: hidden;
  overflow-wrap: break-word;
  text-transform: uppercase;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 强制文本最多显示两行 */
}

效果说明 #

• 当文本较短时，按钮会自动收缩宽度，彻底消除多余留白；
• 当文本较长时，会自动截断成两行，同时按钮宽度不会超过你设置的max-width: 220px；
• 文本始终保持在按钮内垂直居中，样式也符合你的需求。

之前你用单独的.flex类其实没必要，直接给按钮设置inline-flex，再给span加上min-width:0就能解决冲突啦~

备注：内容来源于stack exchange，提问作者Illya B.