一. CSS實(shí)現(xiàn)單行溢出顯示省略號(hào)
#dan_hang{
height: 30px;
line-height: 30px;
margin: 50px auto;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 12px;
width: 150px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}<div id="dan_hang"> 你好， 歡迎來(lái)到雅騰科技有限公司 </div>
實(shí)現(xiàn)效果如下:
二. 實(shí)現(xiàn)多行溢出顯示省略號(hào)
#duo_hang{
width: 150px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
margin: 50px auto;
font-size: 12px;
line-height: 26px;
height: 78px; /*高度正好是 line-height的整數(shù)倍，防止超出的文字*/
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}<div id="duo_hang"> 你好， 歡迎來(lái)到雅騰科技有限公司, 我們采用“小班現(xiàn)場(chǎng)授課”、“手把手輔導(dǎo)學(xué)員”的培養(yǎng)方式， 助你早日順利實(shí)現(xiàn)IT夢(mèng)! </div>
效果如下:
