如何有效解决text-overflow未起作用的困扰

小朋友。。你是否有很多问号？？设置了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;

欢迎补充。。。