CSS控制文本超出指定寬度後用省略號代替,CSS控制文本不換行

CSS控制文本超出指定寬度後用省略號代替,CSS控制文本不換行。

一般的文字截斷(適用於內聯與塊):

.text-overflow {
    display:block;/*內聯對象需加*/
    width:31em;
    word-break:keep-all;/* 不換行 */
    white-space:nowrap;/* 不換行 */
    overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */
    text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ;需與overflow:hidden;一起使用。*/
}

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

table{
    width:30em;
    table-layout:fixed;/* 只有定義了表格的佈局算法爲fixed,下面td的定義才能起作用。 */
}
td{
    width:100%;
    word-break:keep-all;/* 不換行 */
    white-space:nowrap;/* 不換行 */
    overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */
    text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ;需與overflow:hidden;一起使用。*/
}


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

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

以上問題可以解決:使用CSS如何控制文本換行?使用CSS如何控制文本不換行?使用CSS如何控制文本超出範圍後顯示省略號?使用CSS如何控制文本超出範圍後隱藏?感謝您的光臨~~~

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章