css3实现超出文本指定行数(指定文本长度)用省略号代替

css3实现超出文本指定行数(指定文本长度)用省略号代替

PS：搬运，仅供参考

测试代码：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 7         <meta name="apple-mobile-web-app-capable" content="yes">
 8         <meta name="apple-mobile-web-app-status-bar-style" content="black">
 9         <meta content="telephone=no" name="format-detection">
10         <meta content="on" http-equiv="x-dns-prefetch-control">
11         <title>测试css3实现超出文本指定行数(指定文本长度)用省略号代替的效果</title>
12         <style>
13             .unilineText {  /*设置文本为单行，如果超出长度用省略号代替*/
14                 width: 300px;
15                 overflow: hidden;
16                 text-overflow: ellipsis;
17                 -o-text-overflow: ellipsis;
18                 -webkit-text-overflow: ellipsis;
19                 -moz-text-overflow: ellipsis;
20                 white-space: nowrap;  /*规定段落中的文本不进行换行*/
21             }
22             
23             .multiLineText {  /*设置文本为多行，如果超出长度用省略号代替*/
24                 width: 200px;
25                 word-break: break-all;
26                 display: -webkit-box;
27                 -webkit-line-clamp: 3;  /*限制在一个块元素显示的文本的行数*/
28                 -webkit-box-orient: vertical;
29                 overflow: hidden;
30             }
31         </style>
32     </head>
33 
34     <body>
35         <h1>测试显示一行文本：</h1>
36         <div class="unilineText">
37             text-overflow: ellipsis可以用来多行文本的情况下，用省略号隐藏超出范围的文本 ；white-space: nowrap规定段落中的文本不进行换行; -webkit-box-orient：vertical限制在一个块元素显示的文本的行数
38         </div>
39         <h1>测试两行或者两行以上的文本:</h1>
40         <div class="multiLineText">
41             text-overflow: ellipsis可以用来多行文本的情况下，用省略号隐藏超出范围的文本 ；white-space: nowrap规定段落中的文本不进行换行; -webkit-box-orient：vertical限制在一个块元素显示的文本的行数
42         </div>
43 
44     </body>
45 
46 </html>
posted @ 2022-02-26 10:57  (x²+y²-1)³=x²y³  阅读(71)  评论(0)  编辑  收藏  举报