ToC
1.ellipsis {2 overflow: hidden;3 white-space: nowrap;4 text-overflow: ellipsis;5}这生效，但也不生效，为什么？（为了减少上下文带来的理解，下面将使用 inline-style 的方式来设置样式）。
这只对块级元素和行内块有效：
1<p style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">2 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?3</p>但如果多了一些嵌套层级则开始失效：
1<div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">2 <p>3 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo assumenda consectetur vel aperiam vitae in4 dolore quas ducimus, odio ea, nostrum tempore quibusdam repellendus fugiat temporibus necessitatibus?5 </p>6</div>这时候就需要调整类名的位置，将 ellipsis 类移动到元素 <p> 上，同时 <div>元素的类名样式可以移除：
1<div>2 <p style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">3 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo assumenda consectetur vel aperiam vitae in4 dolore quas ducimus, odio ea, nostrum tempore quibusdam repellendus fugiat temporibus necessitatibus?5 </p>6</div>这样似乎可以了，可如果……再多一层怎么办？它又双失效了：
1<div style="display:flex">2 <div>3 <p style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">4 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo assumenda consectetur vel aperiam vitae in5 dolore quas ducimus, odio ea, nostrum tempore quibusdam repellendus fugiat temporibus necessitatibus?6 </p>7 </div>8</div>经过简单实验，如果最外层的元素的 display 属性不为 block 的话，这个例子中的属性设置依旧会失效，比如在项目中常用到的 flex inline-block grid 属性等。这时候的解决办法也很简单：
1<div style="display:flex">2 <div style="overflow:hidden">3 <p style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">4 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo assumenda consectetur vel aperiam vitae in5 dolore quas ducimus, odio ea, nostrum tempore quibusdam repellendus fugiat temporibus necessitatibus?6 </p>7 </div>8</div>但是如果是以下这种结构的话依然会不生效：
1<div style="width: 100px;display:flex;align-items: center;">2 <div>1231</div>3 <div style="flex:1">4 <p style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">5 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo assumenda consectetur vel aperiam vitae in6 dolore quas ducimus, odio ea, nostrum tempore quibusdam repellendus fugiat temporibus necessitatibus?7 </p>8 </div>9</div>这时候可以使用 min-width: 0
1<div style="width: 100px;display:flex;align-items: center;">2 <div>1231</div>3 <div style="flex:1;min-width: 0">4 <p style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">5 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo assumenda consectetur vel aperiam vitae in6 dolore quas ducimus, odio ea, nostrum tempore quibusdam repellendus fugiat temporibus necessitatibus?7 </p>8 </div>9</div>以上。