CSS text-overflow:ellipsis搭配fit-content时对短单词错误触发省略号问题

问题根源 #

你使用flex作为父容器布局时，flex子项默认开启了flex-shrink: 1，空间不足时会自动收缩子项宽度。即使你给子项设置了width: fit-content，也会被强制压缩，导致短文本的容器宽度小于实际内容宽度，触发了非预期的省略号。

解决方案 #

根据你的布局需求，可以选择以下两种方案：

方案1：允许标签超出一行时自动换行

仅需修改两处样式即可：

1. 给父容器.tagsWrapper添加flex-wrap: wrap，允许标签换行
2. 给子项.tagWrap添加flex-shrink: 0，禁止子项被自动收缩
   修复后完整CSS代码如下：

.tagsWrapper{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width:150px;
  border:1px solid green;
  flex-wrap: wrap; /* 新增样式 */
}
.tagWrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 26px;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    display: inline-block;
    border:1px solid red;
    margin-right:3px;
    flex-shrink: 0; /* 新增样式 */
}

方案2：要求所有标签必须排在同一行，仅最后一个超出的标签显示省略号

如果不允许换行，需要额外给最后一个标签设置自动填充剩余空间的属性：

/* 原有样式不变，新增以下规则 */
.tagWrap:last-child {
  flex-grow: 1;
  min-width: 0;
}

原理说明 #

• flex-shrink: 0 禁止flex子项被收缩，保证短文本的容器宽度和内容宽度一致，不会被压缩触发省略
• 原有max-width: 100%规则仍然生效，如果单个标签的内容宽度超过父容器宽度，还是会正常触发省略号，符合你的需求
• 方案2的flex-grow: 1让最后一个标签占满一行剩余空间，min-width: 0是为了解决flex子项默认最小宽度等于内容宽度的问题，确保超出时能正常触发省略

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