一. 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>
效果如下: