文字內容溢位用點點點 省略號

2022-02-22 00:53:05 字數 509 閱讀 4284

我們在專案中一直都是使用js來控制如果文字內容超過的時候,用...來表示,其實是可以通過css來控制的,

下面提供幾種辦法

測試的瀏覽器:ie6,ie7,ie8,chrome17 ,firefox10

1)css方法

text-overflow-fag{

width:500px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;

該方法在ie6,7,8 chrome17,firefox10 下均測試通過

2)網上別人提供的乙個負margin定位的方法,我覺得比較好。

其原理是將(...)使用負margin的方式隱藏在div的上面,使用右浮動的方式,文字使用左浮動的方式隱藏,如果文字過長,就是將...給擠下來

乙個技巧就是(...)所在div的高度要比負margin大一點,為什麼呢?這就是乙個鉤子,一旦超過長度,就將上面的(...)給擠下來了。

關於文字內容溢位用點點點 省略號表示

1.常規css方法 可以實現ie,safari,chrome,opera瀏覽器下文字溢位省略號表示 這是一段測試文字,主要是用來測試文字溢位後是否會用省略號顯示。zxx text overflow 1 2.使用ellipsis.xml檔案使firefox支援文字溢位後點點點省略號表示 這段 呼叫了跨...

CSS 文字溢位省略成點點點

text 我是單行文字我是單行文字我是單行文字我是單行文字我是單行文字我是單行文字我是單行文字我是單行文字 text text 我是多行文字我是多行文字我是多行文字 我是多行文字我是多行文字我是多行文字 我是多行文字我是多行文字我是多行文字 我是多行文字我是多行文字我是多行文字 我是多行文字我是多行...

溢位的文字用省略號顯示

單行文字溢位顯示省略號 單行文字溢位顯示省略號 必須滿足三個條件 1.先強制一行內顯示文字 white space nowrap 預設 normal 自動換行 2.超出的部分隱藏 overflow hidden 3.文字用省略號替代超出的部分 text overflow ellipsis 多行文字溢...