網(wǎng)頁設(shè)計(jì)應(yīng)用:運(yùn)用CSS截字 |
發(fā)布時(shí)間:2020-04-10 文章來源:本站 瀏覽次數(shù):2692 |
截字是一個(gè)很厭惡的問題。為了照顧體現(xiàn)上的需要,一般需要把過長的語句,比如一個(gè)列表中的新聞標(biāo)題,截短。 一般這由程序員運(yùn)用后臺(tái)技能(各種流行的言語,PHP, JSP等)或者前臺(tái)技能(JavaScript)來處理。我個(gè)人傾向于運(yùn)用前臺(tái)技能,由于這對(duì)提高網(wǎng)頁的親和力(accessibility)有優(yōu)點(diǎn)。在非桌面型的瀏覽器中,用戶能夠更便利的掌握信息完整性。 text-overflow是CSS3的一個(gè)性質(zhì)(property),它能夠截短過長的字符串,并依據(jù)值(value)來決定被截掉部分運(yùn)用何種方法展現(xiàn),F(xiàn)在,IE現(xiàn)已完成對(duì)其的支撐,Opera也有了私有屬性(-o-text-overflow)對(duì)其支撐,F(xiàn)irefox好像落后一步……支撐的兩者都可運(yùn)用ellipsis 值,把截掉部分代替成省略號(hào)(即ellipsis)。 所以,你要做的只是,把需要截字的元素定好寬度,和overflow一同運(yùn)用,即可完成作用。 可是Firefox不支撐,所以大概你知道我下面要干什么了。 解決方案是,利用偽類:after添加省略號(hào),再把它定位到右邊即可。作用有點(diǎn)粗糙,但簡(jiǎn)潔明了,純CSS完成 |
|