text-overflow失效

使用場景：用…替換多餘的文字

css方法

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

但是在表格中它是不生效的！！！

如果在css方法中添加display：block和固定的寬度就ok！

           display: block;
           width: 100px;
           text-overflow: ellipsis;
           overflow:hidden;
           white-space: nowrap;

這是爲什麼呢？

1. 單純的來看，tr，td既是行內元素也是塊級元素。
2. 因爲它們可以設置其寬高，但是不能設置其padding。
3. 我們在使用display：block之後相當於將行級元素轉化爲塊級元素，並且爲之設置寬度。
4. 因爲overflow，text-overflow的使用是相對而言對文本或者區域進行截斷和隱藏。