text-overflow: ellipsis在span元素上不生效问题咨询

核心原因 #

你给span设置了display: flex，而text-overflow: ellipsis的生效有几个关键前提：

• 元素必须是块级/行内块级/弹性项目（但需针对文本容器），不能是flex容器本身直接承载文本
• 省略号只会作用于单个文本节点或包含文本的块级子元素，flex容器下的匿名文本节点无法触发该属性

你的结构里，.kurzbezeichnung这个span是flex容器，里面包含mat-icon和匿名文本节点，此时text-overflow无法直接作用在flex容器上的文本。

解决方法 #

方法一：给文本单独套一层容器（推荐） #

修改HTML结构，把文本放在单独标签内，再给这个文本容器设置省略号相关样式：

<div class="row main">
    <span class="kurzbezeichnung">
      <mat-icon svgIcon="file"></mat-icon>
      <span class="text-content">Hello! This is a longer text to see if overflow ellipsis effect will get applied!</span>
    </span>
</div>

对应CSS调整：

.row {
  & span.kurzbezeichnung {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 150px;
    max-width: 150px;
  }
  
  .text-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1; /* 让文本容器占满剩余空间 */
  }
}

.row {
  display: flex;
  flex-direction: row;
  gap: 18px;
  width: 100%;
}

方法二：保留原有结构，用伪元素模拟省略号（兼容性略差） #

如果不想修改HTML结构，可通过伪元素实现，但需确保背景色与容器一致：

.kurzbezeichnung {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 150px;
  max-width: 150px;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}

.kurzbezeichnung::after {
  content: '...';
  position: absolute;
  right: 0;
  background: #fff; /* 背景色需和容器一致，遮盖后方文本 */
  padding-left: 4px;
}

关键知识点 #

text-overflow: ellipsis仅对包含文本的块级元素生效，且必须同时设置white-space: nowrap和overflow: hidden；当元素为flex容器时，内部文本会成为匿名flex item，无法直接触发父容器的省略号效果，需给文本单独套容器处理。

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