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>