解決text-overflow: ellipsis;不生效的問題

按照text-overflow: ellipsis;使用規則，在標籤樣式中添加該屬性未生效，例如：
寫道
.text {
text-overflow: ellipsis;
}

<div class="text">長文字長文字長文字長文字長文字長文字長文字長文字長文字長文字長文字長文字長文字長文字</div>

以後，發現並無達到咱們想要的預期效果，其實還須要另外2個CSS屬性的支持：

寫道
.text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

<div class="text">長文字長文字長文字長文字長文字長文字長文字長文字長文字長文字長文字長文字長文字長文字</div>

其中，white-space是設置文本不換行，overflow設置標籤超出部分自動隱藏，另外提醒，該CSS屬性在某些瀏覽器上不生效，若是不須要照顧不兼容的瀏覽器，好比IE，能夠放心大膽使用。

當把text-overflow設爲ellipsis時文本溢出內容就能顯示爲省略標記，而設爲clip時就能把文本溢出的部分裁切掉，不過在表格裏面使用text-overflow後依舊不能隱藏超出的文本，具體解決方法祥看本文
在w3cschool中css3中有個文本相關的屬性text-overflow，當把它設爲ellipsis時文本溢出內容就能顯示爲省略標記，而設爲clip時就能把文本溢出的部分裁切掉，固然，前提是設置好兩個屬性，那就是white-space:nowrap（強制文本在一行內顯示）及overflow:hidden（溢出內容爲隱藏），也就是要同時有

代碼以下：

{
text-overflow:ellipsis或clip;
white-space:nowrap;
overflow:hidden;
}
由於以前有用過很多次這個屬性，並且用得也都很順利，因此最近在弄一些table的時候遇到了td內的內容太多而出現換行從而影響總體的美觀的問題，因此我想把文本不換行並且讓超出的文本能顯示爲省略號，因而我就很天然的就去用了上面那三屬性而且也爲td設置了長度和寬度，結果神了奇，一直沒把超出的文本內容給換成省略號，嘗試排除了各類我以爲有可能的影響後依舊不能解決，因而我只好去google一下，後來終於找到了緣由，就是要在table的樣式裏定義一個屬性 table-layout:fixed，綜上，要想解決表格裏面使用text-overflow後依舊不能隱藏超出的文本的問題，就必須完整的使用下面這些屬性
代碼以下
td{
text-overflow:ellipsis或clip;
white-space:nowrap;
overflow:hidden;
width:**px;
}
table{
table-layout:fixed;
}
還有若是想鼠標移動上去時顯示被隱藏的文本內容，還能夠設置
代碼

td:hover
{
text-overflow:inherit;
overflow:visible;
}