如何在Flex元素内实现文本省略并适配父容器

云原生阿岚

2026-6-17

解决方案

要实现固定尺寸父容器内的粉色Flex容器与灰色固定宽度div适配布局，同时让长文本自动以省略号截断，需修正几个关键样式问题：

关键修改点

修复.parent中color: red:;的语法错误（多余的冒号）
给.flex容器添加min-width: 0，确保它能在父容器空间不足时收缩，避免被内部文本撑爆
给.long-text去掉max-width: 50%，改用flex: 1平分Flex容器空间，同时添加min-width: 0（Flex项默认min-width: auto会阻止收缩，导致文本无法截断）
可选添加box-sizing: border-box到.parent，让padding包含在固定宽度内，避免父容器总宽度超出设定值

完整代码

CSS

.parent {
  background-color: cyan;
  width: 500px;
  height: 500px;
  color: red;
  padding: 20px;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}

.flex {
  flex: 1;
  background-color: pink;
  display: flex;
  flex-direction: row;
  min-width: 0;
}

.fixed {
  width: 50px;
  background-color: gray;
  height: 100%;
  flex: 0 0 auto;
}

.long-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  padding: 0 8px;
}

HTML

<div class="parent">
  <div class="flex">
    <div class="long-text">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem qui, doloremque perferendis ducimus tempora facere, est, quisquam tenetur veritatis at earum eveniet minima numquam repellendus dolorum enim quos cupiditate quaerat?
    </div>
    <div class="long-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem qui, doloremque perferendis ducimus tempora facere, est, quisquam tenetur veritatis at earum eveniet minima numquam repellendus dolorum enim quos cupiditate quaerat?</div>
  </div>
  <div class="fixed"></div>
</div>