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>