如何让按钮在父容器宽度不足时保持自身宽度与单行显示？

要实现按钮在父容器宽度不足时保持自身宽度、文本单行不换行的效果，只需对现有代码做以下调整：

修改后的代码 #

CSS #

.container {
  display: flex;
  align-items: center;
  width: 180px; /* 可改为10px测试极限场景 */
  height: 50px;
  background-color: #ddd;
  overflow: hidden;
}

/* 阻止按钮的父元素被flex容器压缩 */
.container > div {
  flex-shrink: 0;
}

.container button {
  overflow: hidden;
  width: 200px;
  /* 移除限制按钮宽度的max-width属性 */
  white-space: nowrap; /* 强制文本单行显示 */
  background: green;
}

HTML #

<div class="container">
  <div>
    <button>I need overflow this button in one line</button>
  </div>
</div>

关键修改说明 #

• flex-shrink: 0：按钮的直接父容器是flex项目，默认flex-shrink:1会在容器空间不足时自动收缩，设置为0后它会保持自身内容宽度，不会被压缩。
• 移除max-width:100%：原属性会让按钮宽度受限于父元素，移除后按钮能维持设置的固定宽度。
• white-space: nowrap：强制按钮内文本始终单行显示，不会因宽度不足换行。

调整后，即便父容器宽度设为10px，按钮也会保持200px的原有尺寸，文本维持单行状态，超出容器的部分会被容器的overflow:hidden隐藏。

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