小朋友。。你是否有很多问号？？设置了text-overflow：ellipsis;但是省略号就是不生效，为此折腾了好久。。。（好了，废话不多说，点进来的朋友大部分肯定是找了许多解决方案都没解决，我也是这么过来的哈哈哈）
下面是完整解决方案：
1.最近的父级div上添加overflow: hidden;
这个是我当时忽略的地方，一般文字都会用span或者p包裹，要在最近的包裹了span的div里面添加overflow: hidden;！！！必须最近，否则祖父级别以上的也无效，不会显示....
你会说：我在span或p里添加了啊，为啥不行？别问，因为我也想问为啥不行。。。
2.老生常谈的两个配合属性white-space: nowrap; 和overflow: hidden;
完整代码如下：
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
overflow:hidden; // 代表着超出文本的部分不显示
white-space:nowrap; // 代表强制文本在一行显示。
3.设置在width有效的元素上，并且设置必要的width。
- 块级元素（block level element） width、height 属性默认有效.
- 内联元素（inline element 有的人也叫它行内元素）width、height 属性无效。
- 可以通过改变display，使得width、height属性有效。如：添加display: block;
欢迎补充。。。
