<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .text1{ width: 150px; height: 20px; line-height: 20px; border: 1px solid #000000; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .text2{ width: 100px; line-height: 20px; border: 1px solid #000000; display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/ display: -moz-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; /*设置或检索伸缩盒对象的子元素的排列方式*/ -webkit-line-clamp:5; /*第几行出现省略号*/ } </style> </head> <body> <div class="text1">单行文本文字溢出效果是这样的这样的这样的这样的这样的这样的这样的这样的</div> <div class="text2">多行文本文字溢出效果是这样的这样的这样的这样的这样的这样的这样的这样的这样的这样的这样的这样的这样的这样的这样的这样的</div> </body> </html>
