text-overflow 文字溢出显示省略号问题

很多小编写代码的时候会遇到一行或多行超出部分想显示省略号不知道怎么下手了，我们也知道属性text-overflow，但不知道什么设置能够达到想要的效果，text-overflow属性我就不一一介绍了，可以去W3school查看，

先看效果：

无非是这两种效果，一种单行，一种多行。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="utf-8">
 5     <title>溢出效果</title>
 6 </head>
 7 <style type="text/css">
 8 .text-overflow-one{
 9     width: 100px;
10     background-color: #00FFFF;
11     overflow: hidden;
12     text-overflow: ellipsis;
13     white-space: nowrap;
14 }
15 .text-overflow-two{
16     width: 100px;
17     background-color: #00FFFF;
18     text-overflow: ellipsis;
19     overflow: hidden;
20     display: -webkit-box;
21     -webkit-line-clamp: 2;
22     -webkit-box-orient: vertical;
23 }
24 </style>
25 <body>
26 
27     <p class="text-overflow-one">一行文本多余会显示省略号的</p> 
28 
29     <p class="text-overflow-two">多行文本多余会显示省略号的</p> 
30     
31     
32 </body>
33 </html>

 通过上面的css，常见的一行中超出文本宽度的内容用省略号，设置text-overflow:ellipsis;后还要设置 overflow:hidden;  white-space:nowrap;，当设置了text-overflow属性后，要同时设置overflow和white属性，text-overflow才生效。

    然而white-space:nowrap; 是指不换行，就是说只能一行显示。

多行的话要用在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。

多行实现要结合属性：

  1. display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
  2. -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
  3. text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。

文本多行显示省略号就这两种，如果想显示3行，4行，5行，......只要设置属性-webkit-line-clamp: 3,4，5......;就可以了。

希望对小编有帮助，如有不懂的地方，共同讨论，相互学习。

谢谢收看！

下次见！

posted @ 2017-10-18 15:05  zenderdi  阅读(1724)  评论(0)  编辑  收藏  举报