css文本溢出隐藏的疑难杂症

css 中设置单行文本（多行文本本身并不是一个标准的浏览器属性，存在着兼容性问题，这里我们只讨论单行文本溢出显示省略号的实现）溢出显示省略号的方法如下：

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

这生效，但也不生效，为什么？（为了方便阅读和理解，下面将使用 inline-style 的方式来设置样式）。

因为这只对块级元素和行内块有效：

<p style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo assumenda consectetur vel aperiam vitae in inventoreeligendi atque,dolore quas ducimus, odio ea, nostrum tempore quibusdam repellendus fugiat temporibus necessitatibus?
</p>

但如果多了一些嵌套层级则开始失效：

<div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
    <p>
      123 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo assumenda consectetur vel aperiam vitae in inventore
      eligendi atque,
      dolore quas ducimus, odio ea, nostrum tempore quibusdam repellendus fugiat temporibus necessitatibus?
    </p>
</div>

这时候就需要调整类名的位置，将 ellipsis 样式移动到元素 <p> 上，同时 <div>元素的类名样式可以移除：

<div>
    <p style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
      123 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo assumenda consectetur vel aperiam vitae in inventore
      eligendi atque,
      dolore quas ducimus, odio ea, nostrum tempore quibusdam repellendus fugiat temporibus necessitatibus?
    </p>
</div>

这样似乎可以了，可如果……再多一层怎么办？它又失效了：

<div style="display:flex">
    <div>
      <p style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
        123 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo assumenda consectetur vel aperiam vitae in inventore
        eligendi atque,
        dolore quas ducimus, odio ea, nostrum tempore quibusdam repellendus fugiat temporibus necessitatibus?
      </p>
  </div>
</div>

经过简单实验，如果最外层的元素的 display 属性不为 block 的话，这个例子中的属性设置依旧会失效，比如在项目中常用到的 flex``inlien-block``grid 属性等。这时候的解决办法也很简单：

<div style="display:flex">
    <div style="overflow:hidden">
      <p style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
        123 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo assumenda consectetur vel aperiam vitae in inventore
        eligendi atque,
        dolore quas ducimus, odio ea, nostrum tempore quibusdam repellendus fugiat temporibus necessitatibus?
      </p>
  </div>
</div>

只要理解了上述几种方式的解决办法，遇到更复杂的布局结构解决起来也能得心应手。

以上。