text-overflow不生效的问题

结论：
        white-space,overflow,text-overflow 三属性需要设置在宽度有效的元素上，且该元素和包含文字的元素中间包括该元素不能是block或inline-block元素，才能让文本实现溢出省略。

何为宽度有效？block的高度和宽度默认都有效，inline的宽高都无效，inline-block需要显式设置width才能实现宽度有效。

当然首先三兄弟一定需要设置：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

在设置了三兄弟的基础上，可以通过以下方式实现：（亲测有效）

1、可以通过设置某一span元素的display:inline-clock，再显式的指定该span元素的width 实现

2、可以直接在距离最近的div等 块级元素上设置三兄弟

3、可以在设置了三兄弟的span元素的父级元素通过设置父元素的display:flex 来实现span元素的宽度有效，这种方式同样可以实现。

参考：正确解决text-overflow不生效的问题 - 简书

https://www.cnblogs.com/dingxingxing/p/11184393.html

这篇好文章是转载于：学新通技术网