一. CSS實現單行溢出顯示省略號
#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"> 你好, 歡迎來到雅騰科技有限公司 </div>
實現效果如下:
二. 實現多行溢出顯示省略號
#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的整數倍,防止超出的文字*/ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
<div id="duo_hang"> 你好, 歡迎來到雅騰科技有限公司, 我們采用“小班現場授課”、“手把手輔導學員”的培養方式, 助你早日順利實現IT夢! </div>
效果如下: