Display flex布局下div宽度超出设定值的问题求助

问题核心 #

Flex容器内的子元素默认会随内容自动撑开，导致text-overflow: ellipsis无法触发——因为元素没有宽度限制，不会出现溢出情况。

修复方案 #

1. 给文本所在的父容器添加flex: 1和overflow: hidden，让它占据容器内除右侧图标外的剩余空间，同时限制宽度避免撑开父元素。
2. 给省略样式的元素设置width: 100%，使其继承父容器的宽度限制。

修改后的完整代码 #

CSS

body {
    background-color: lightblue;
}

.container {
    display: flex;
    width: 130px;
    border: 1px solid #ccc; /* 方便直观查看容器范围 */
    margin-bottom: 8px;
}

.d-flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-between {
    justify-content: space-between;
}

/* 新增：文本父容器的宽度限制 */
.text-container {
    flex: 1;
    overflow: hidden;
}

.table-header__width-ellipses {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
    width: 100%; /* 继承父容器宽度，确保文本在边界处截断 */
}

HTML

<div class="d-flex">
  <div class="container">
    <div class="d-flex justify-content-between w-100 align-items-center">
      <!-- 添加text-container类 -->
      <div class="d-flex flex-column justify-content-center text-container">
        <div>
          <span class="table-header__width-ellipses pl-2">Long text included here that should be truncated properly</span>
        </div>
      </div>
      <div class="d-flex">
        <div class="header--sort_icon"></div>
        <div class="cursor-pointer cell-header-addcol">
          <img src="https://cdn.pixabay.com/photo/2022/01/11/21/48/link-6931554_1280.png" alt="menu" width="16" height="16">
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="d-flex justify-content-between w-100 align-items-center">
      <div class="d-flex flex-column justify-content-center text-container">
        <div>
          <span class="table-header__width-ellipses pl-2">Short text</span>
        </div>
      </div>
      <div class="d-flex">
        <div class="header--sort_icon"></div>
        <div class="cursor-pointer cell-header-addcol">
          <img src="https://cdn.pixabay.com/photo/2022/01/11/21/48/link-6931554_1280.png" alt="menu" width="16" height="16">
        </div>
      </div>
    </div>
  </div>
</div>

关键说明 #

• flex: 1让文本容器自动填充容器内的剩余空间，确保右侧图标固定宽度后，文本区域适配剩余宽度。
• overflow: hidden限制文本容器的宽度，避免内容撑开父容器，触发内部文本的溢出省略逻辑。
• width: 100%让省略样式的span元素填满父容器，保证文本在容器边界处精准截断。

内容的提问来源于stack exchange，提问作者mc-user