CSS怎么控制文本超出指定寬度顯示省略號和文本不換行效果

這篇文章將為大家詳細講解有關(guān)CSS怎么控制文本超出指定寬度顯示省略號和文本不換行效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

一般的文字截斷（適用于內(nèi)聯(lián)與塊）：

CSS Code復(fù)制內(nèi)容到剪貼板

.text-overflow {   
    display:block;/*內(nèi)聯(lián)對象需加 */  
    width:31em;/* 何問起 hovertree.com */  
    word-break:keep-all;/* 不換行 */  
    whitewhite-space:nowrap;/* 不換行 */  
    overflow:hidden;/* 內(nèi)容超出寬度時隱藏超出部分的內(nèi)容 */  
    text-overflow:ellipsis;/* 當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記(...) ；需與overflow:hidden;一起使用。*/  
}

對于表格文字溢出的定義：

對于表格超出范圍顯示省略號

CSS Code復(fù)制內(nèi)容到剪貼板

table{   
    width:30em;   
    table-layout:fixed;/* 只有定義了表格的布局算法為fixed，下面td的定義才能起作用。 */  
}   
/*  
何問起  
hovertree.com  
*/  
td{   
    width:100%;   
    word-break:keep-all;/* 不換行 */  
    whitewhite-space:nowrap;/* 不換行 */  
    overflow:hidden;/* 內(nèi)容超出寬度時隱藏超出部分的內(nèi)容 */  
    text-overflow:ellipsis;/* 當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記(...) ；需與overflow:hidden;一起使用。*/  
}

需要你注意的是，這個CSS樣式只對單行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。 這個寫法只有IE會有“...”，

其它的瀏覽器文本超出指定寬度時會隱藏。

關(guān)于“CSS怎么控制文本超出指定寬度顯示省略號和文本不換行效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。