CSS3溢出文字省略

最新推荐文章于 2024-04-01 07:36:49 发布

weixin_30535167

最新推荐文章于 2024-04-01 07:36:49 发布

阅读量73

点赞数

原文链接：http://www.cnblogs.com/xiaozhou223/p/11341735.html

版权

 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>