如何让flex布局中占剩余空间的div不溢出且溢出时显示省略号

API 探路者

2026-9-24

解决方案

根因说明

flex布局下弹性项默认min-width: auto，内容长度超过分配宽度时会撑开容器，导致溢出父元素。

修改方案

给.second类增加以下属性即可实现需求，兼容性覆盖绝大多数主流浏览器：

.second {
  flex: 1;
  min-width: 0; /* 覆盖默认min-width:auto，阻止内容撑宽容器 */
  overflow: hidden;
  /* 以下为多行省略配置 */
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 可自行调整需要显示的行数 */
  -webkit-box-orient: vertical;
  /* 长字符折行，兼容性优于overflow-wrap: anywhere，支持到IE11 */
  overflow-wrap: break-word;
}

完整可运行代码

CSS部分

#wrapper{
  width:50%;
  display:flex;
  height:10rem;
  background-color:yellow;
}

#wrapper div{
  height:5rem;
}

.second {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
}

HTML部分

<div id="wrapper">
  <div style="background: blue">short version</div>
  <div class="second" style="background:red;">looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog version</div>
</div>