1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>文字多余部分隐藏</title> 6 <style> 7 .content { 8 width: 300px; 9 height: 100px; 10 border: 1px solid #ccc; 11 margin: 0 auto; 12 } 13 span { 14 display: block; 15 } 16 /* 单行省略显示 */ 17 .main { 18 overflow: hidden; 19 text-overflow: ellipsis; 20 white-space: nowrap; 21 } 22 23 /* 多行省略显示 */ 24 .main1 { 25 overflow: hidden; 26 /* 将对象作为弹性伸缩盒子模型显示 。 */ 27 display: -webkit-box; 28 /* 设置或检索伸缩盒对象的子元素的排列方式 。 */ 29 -webkit-box-orient: vertical; 30 /* 显示为文本行数 */ 31 -webkit-line-clamp: 3; 32 box-sizing: border-box; 33 } 34 </style> 35 </head> 36 <body> 37 <div class="content"> 38 <span class="main">我是单行文字，多余部分会被省略我是单行文字，多余部分会被省略</span> 39 <span class="main1">我是多行文字，多余部分会被省略，我是多行文字，多余部分会被省略我是多行文字，多余部分会被省略我是多行文字，多余部分会被省略我是多行文字，多余部分会被省略<span> 40 </div> 41 </body> 42 </html>