01.塊狀元素單行文字超出顯示省略號:
ul li
02.td內的文字超出顯示省略號:
table
td本方法用於解決**單元格內容過多時的美觀問題,主要涉及到4句css樣式:
1. table-layout: fixed 由於table-layout的預設值是auto,即table的寬高將取決於其內容的多寡,如果內容的體積無法估測,那麼最終**的呈現形式也無法保證了,fixed一下就好了。(注意:此樣式是關鍵)
2. white-space: nowrap 是為了保證無論單元格(td)中文字內容有多少,都不會自動換行,此時多餘的內容會在水平方向撐破單元格。
3. overflow: hidden 隱藏超出單元格的部分。
4. text-overflow: ellipsis 將被隱藏的那部分用省略號代替。
internet explorer 6, 7, 8, 9及以上版本
firefox 最新版
chrome 最新版
文字超出擷取(單行 多行)
width 100px overflow hidden white space nowrap text overflow ellipsis width 100px overflow hidden display webkit box webkit box orient vertical webkit...
css實現超出div長度文字自動隱藏或用省略號表示
展現效果 展現效果 css實現超出div長度用省略號表示 overflow hidden overflow 屬性規定當內容溢位元素框時發生的事情。這個屬性定義溢位元素內容區的內容會如何處理。hidden 表示內容會被修剪,並且剪掉的內容是不可見的。white space nowrap 規定文字不進行...
css實現超出div長度文字自動隱藏或用省略號表示
在網頁設計中,一些區域的標題文字是不能換行的,例如首頁顯示的文章標題,因為布局是固定的,換行會打亂布局,從而使網頁產生錯位。因此,我們需要一行一段文字,超出行寬的文字用省略號表示或者直接去掉不用省略號代替。看看下圖中的例項。超出div長度用省略號表示 css實現超出div長度用省略號表示 源 其實不...