截取字符串一般是用js或者后臺語言來實現,其實使用CSS也是可以實現此效果的。
代碼實例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.survivalescaperooms.com/" />
<title>CSS教程-軟件開發網</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">軟件開發網歡迎您,只有奮斗才會有美好的未來</div>
<div id="second">軟件開發網歡迎您,只有奮斗才會有美好的未來</div>
</body>
</html>特別注意的是:不能夠省略white-space:nowrap和overflow:hidden,否則截取字符串無效。
總結
以上所述是小編給大家介紹的CSS3截取字符串實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對軟件開發網網站的支持!
新聞熱點
疑難解答