文本溢出显示省略号

1. 单行溢出

使用text-overflow属性，并且要加width宽度属性

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

2. 多行溢出

1. WebKit内核和移动端的浏览器，使用CSS扩展属性

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

注：

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

• display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

• -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

• 非webkit内核浏览器

2. 其他浏览器

• 使用clamp.js插件 |下载地址:https://github.com/josephschmitt/Clamp.js
• 用法：$clamp(node,options);
  node是要操作的节点
  options包括：
  1.clamp(数字|字符串|’auto’)：行数
  2.useNativeClamp(Boolean)： 是否使用原生的 -webkit-line-clamp 属性在 支持的浏览器中。 默认是true 。如果你使用的是 Webkit 内核的浏览器，但是在某些情况下，显示不正常。你可以把这个值设置为false，使用基于js的实现方式
  3.truncationChar (String)：在HTML元素截断之后显示的字符串，默认是省略号(…)。同时支持 字符串和HTML标签。
  4.truncationHTML：在 “truncationChar” 之前显示的 HTML 字符串。同时支持 字符串和HTML标签。
  5.animate (Boolean)是否实现动画折叠，当设置为true的时候动态的移除多余的字符，直到合适的省略效果。
• 实例：

  1.p标签有ID属性
  var node=document.getElementById("chuli");
  $clamp{node,{clamp:2}}
  2.p标签有class属性
  var module = document.getElementsByClassName('P')
     for(var i = 0;i<module.length;i++){
         $clamp(module[i]),{
             clamp:'2'
         }
     }