CSS超出文字指定寬度以省略號取代和文字不換行分析

這篇文章主要介紹了CSS超出文字指定寬度用省略號取代和文字不換行的相關資料，小編曲的實用性非常，特此分享到腳本之家平台，供大家參考

一般的文字截斷（適用於內聯與區塊）：

.text-overflow {   
    display:block;/*内联对象需加 */
    width:31em;/* 何问起 hovertree.com */
    word-break:keep-all;/* 不换行 */
    whitewhite-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

##對於表格文字溢出的定義：
 
對於表格超出範圍顯示省略號

table{   
     width:em;   
     table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
 }   
 td{   
    width:%;   
    word-break:keep-all;/* 不换行 */
    whitewhite-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

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

這個寫法只有IE會有“...”，

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

以上所述是針對CSS超出文字指定寬度用省略號代替和文字不換行的相關介紹，希望對大家有所幫助，同時也非常感謝大家對PHP中文網的支持！

以上是CSS超出文字指定寬度以省略號取代和文字不換行分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！