如何在flexbox布局容器中实现text-overflow: ellipsis且不撑大父容器？

嘿，这个需求其实很好解决，核心就是把文本的空间限制和flex容器的缩放规则隔离开来，既让.one严格遵循flex布局的缩放逻辑，又让内部文本老老实实待在分配的85%空间里，绝不撑大容器。具体实现方案如下：

HTML 结构 #

<div class="flex-container">
  <div class="one">
    <span class="text-wrap">这里是可能超长的文本内容，比如Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
  </div>
  <div class="two">第二个flex项</div>
  <div class="three">第三个flex项</div>
</div>

CSS 样式 #

.flex-container {
  display: flex;
  width: 100%; /* 可以根据需求设置容器宽度，比如固定值或百分比 */
  border: 1px solid #eee;
}

/* 保留你原本的flex属性配置，这里假设grow和shrink都是1，basis设不同值 */
.one, .two, .three {
  flex-grow: 1;
  flex-shrink: 1;
  border: 1px solid #ccc;
  padding: 8px;
  /* 关键：给flex项加overflow:hidden，彻底锁住容器尺寸，防止被文本撑开 */
  overflow: hidden;
}

.one {
  flex-basis: 250px; /* 你的自定义basis值 */
}

.two {
  flex-basis: 200px; /* 你的自定义basis值 */
}

.three {
  flex-basis: 150px; /* 你的自定义basis值 */
}

/* 控制文本的容器，实现85%空间限制+溢出省略 */
.text-wrap {
  display: block;
  width: 85%; /* 文本仅使用.one容器的85%空间 */
  white-space: nowrap; /* 强制文本不换行 */
  text-overflow: ellipsis; /* 溢出时显示省略号 */
  overflow: hidden; /* 隐藏超出部分 */
}

关键细节说明 #

• .one上的overflow: hidden：这是阻止文本撑大flex项的核心，flex项默认会被内部内容撑开，加上这个属性后，它的尺寸会严格遵循flex布局的计算结果，内部超出内容直接被裁剪。
• 内部.text-wrap容器：专门用来限制文本的宽度占比，同时配合三个文本溢出属性，完美实现“超长文本显示省略号”的需求。
• 保留原flex属性：.one的flex-grow、flex-shrink、flex-basis完全沿用你原本的设置，不会影响它在flex布局中的缩放行为。

如果需要支持多行文本溢出，只需要把.text-wrap的样式改成多行版本即可（比如用-webkit-line-clamp），核心逻辑还是一样的：用内部容器隔离文本空间，flex项本身用overflow: hidden锁住尺寸。

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