截取字符串一般是用js或者后臺(tái)語(yǔ)言來(lái)實(shí)現(xiàn),其實(shí)使用CSS也是可以實(shí)現(xiàn)此效果的。
代碼實(shí)例如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.survivalescaperooms.com/" /><title>CSS教程-武林網(wǎng)</title><style type="text/css"> #first{ width:120px; height:30px; background-color:#F30; overflow:hidden; text-overflow:clip; white-space:nowrap;}#second{ width:120px; height:30px; background-color:#F30; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:10px;}</style> </head><body><div id="first">武林網(wǎng)歡迎您,只有奮斗才會(huì)有美好的未來(lái)</div> <div id="second">武林網(wǎng)歡迎您,只有奮斗才會(huì)有美好的未來(lái)</div> </body></html>特別注意的是:不能夠省略white-space:nowrap和overflow:hidden,否則截取字符串無(wú)效。
總結(jié)
以上所述是小編給大家介紹的CSS3截取字符串實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持!
新聞熱點(diǎn)
疑難解答
圖片精選