CSS设置text-overflow:ellipsis后文本截断未显示省略号如何解决

问题现象 #

实现单行文本溢出省略效果时，文本超出容器宽度后被直接截断，未正常显示预期的省略点。

复现代码 #

CSS样式 #

.translation_wrap{
    width: 180px;
    overflow: hidden;
    white-space: nowrap;        
    text-overflow: ellipsis;
}

HTML结构 #

<p class="tooltipparent translation_wrap" title="{{'NOT_IN_AUTO' | translate }}"><label>{{'NOT_IN_AUTO' | translate}}</label></p>

实际运行表现：文本超出180px容器宽度后被硬截断，未出现省略号。

故障原因 #

text-overflow: ellipsis 生效需要满足两个核心前提：一是样式要作用在直接承载文本、宽度被固定约束的元素上；二是该元素的内容溢出行为受自身overflow属性控制。
当前代码中溢出省略相关样式全部写在外层<p>标签上，但实际文本由内部嵌套的<label>标签承载。<label>默认为行内元素，宽度随文本内容自适应撑开，外层p标签的overflow: hidden只是直接裁切了超宽的label子元素，p标签本身没有直接承载溢出的文本节点，无法触发自身的文本省略逻辑，因此不会显示省略号。

修复方案 #

两种方案任选其一即可：

• 方案1：将溢出省略规则迁移到实际承载文本的label元素上，同时将label设置为块级元素，让其宽度受父容器约束

.translation_wrap {
    width: 180px;
}
.translation_wrap label {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

• 方案2：移除多余的内层label标签，将文本直接放在设置了translation_wrap类的p标签内，原有CSS无需修改即可生效

<p class="tooltipparent translation_wrap" title="{{'NOT_IN_AUTO' | translate }}">{{'NOT_IN_AUTO' | translate}}</p>

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