文本溢出换行时隐藏按钮图标实现方案问询

你需要制作包含文本和图标的按钮，要求当按钮空间不足导致文本换行时自动隐藏图标。以下是纯CSS的解决方案，无需JavaScript：

核心思路 #

利用弹性布局的换行特性，结合最大高度和溢出隐藏，让按钮在内容高度超过单行文本高度时，自动隐藏被挤到下一行的图标。

完整代码示例 #

<style>
  .some-flex-box {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    width: 300px;
    margin-bottom: 16px;
  }
  
  .reactive-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    /* 单行文本高度，需与line-height匹配，根据字体调整 */
    max-height: 1.5em;
    overflow: hidden;
    line-height: 1.5em;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
  }
  
  .reactive-button img {
    height: 16px;
    width: 16px;
    flex-shrink: 0; /* 防止图标被压缩变形 */
  }
</style>

<div class="some-flex-box">
  <div>场景1：内容刚好适配，图标正常显示</div>
  <button class="reactive-button">
    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e0/WPVG_icon_2016.svg/1024px-WPVG_icon_2016.svg.png" alt="功能图标"/>
    awesome
  </button>
</div>

<div class="some-flex-box">
  <div>场景2：空间不足文本换行，图标自动隐藏</div>
  <button class="reactive-button">
    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e0/WPVG_icon_2016.svg/1024px-WPVG_icon_2016.svg.png" alt="功能图标"/>
    uh oh
  </button>
</div>

<div class="some-flex-box">
  <div>场景3：预期效果（无图标状态）</div>
  <button class="reactive-button">
    this works
  </button>
</div>

原理说明 #

1. display: inline-flex：让按钮内部元素以弹性布局排列，同时保持按钮的行内特性。
2. flex-wrap: wrap：当按钮可用宽度不足时，允许内部内容换行。
3. max-height: 1.5em：限制按钮最大高度为单行文本高度，需与line-height值保持一致。
4. overflow: hidden：当内容换行导致整体高度超过max-height时，隐藏超出部分（即被挤到下一行的图标）。
5. flex-shrink: 0：固定图标尺寸，避免被弹性布局压缩变形。

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