flex容器内item在x轴溢出父元素 如何给超长内容chip添加省略号

问题根因 #

你的chip组件未设置最大宽度限制，且flex布局下的子元素默认最小宽度为内容宽度，导致文本过长时chip直接撑开超出父容器，无法触发内部文本的省略号效果。

修复步骤 #

只需要修改两处CSS样式即可：

• 给.chip添加max-width: 100%，限制chip本身宽度不超过父容器
• 给.chip__label添加min-width: 0，覆盖flex子项默认的最小宽度规则，让文本超出时可以正常触发裁剪和省略

修改后完整CSS代码 #

.container {
  border: 1px solid red;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 300px;
}

.chip {
  box-sizing: border-box;
  display: inline-flex;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  border: 1px solid black;
  margin-right: auto;
  margin-bottom: 8px;
  /* 新增样式 */
  max-width: 100%;
}

.chip__label {
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left: 16px;
  padding-right: 16px;
  color: blue;
  /* 新增样式 */
  min-width: 0;
}

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