我們經(jīng)常遇到div寬度固定,單行字符有限,文字信息顯示不全,影響閱讀性和SEO優(yōu)化,有沒有讓你抓狂呢?
下面就大家一個CSS控制單行長度和字符個數(shù)的方法 兼容各大瀏覽器,隱藏多余字符,用“...”代替。
兼容性:
IE6測試兼容,IE7測試兼容,,IE8測試兼容,IE9測試兼容,Chrome測試兼容,F(xiàn)ireFox測試兼容,Opera測試兼容。
CSS代碼:
-
.mubanzhijiali{/*標(biāo)簽可以定義多個,不過請注意width屬性,最好將width屬性去掉*/
-
display:block;/*定義為塊級;這個屬相很重要,沒有這個屬性,很難實現(xiàn)單行寬度的效果*/
-
width:100%;/*要顯示文字的寬度提醒:可以將此屬性剔除,然后就可以多標(biāo)簽的實現(xiàn)單行控制了*/
-
float:left;/*左對齊*/
-
overflow:hidden;/*超出的部分隱藏起來。*/
-
whitewhite-space:nowrap;/*不顯示的地方用省略號...代替*/
-
text-overflow:ellipsis;/*支持IE*/
-
-o-text-overflow:ellipsis;/*支持Opera*/
-
}
按上面的方法就可解決隱藏多余字符,用“...”代替了。