css常用技巧--文字省略(单行，多行)

文字省略：
在处理段落的时候常常会遇见文字溢出后显示省略符号的需求，常常有三种需求。
1，固定长度后溢出显示省略号，
这种一般在标题显示上用的比较多，使用时一定要固定宽度。

   li {width:100px;overflow:hidden;text-overflow:ellipsis; }  

　语法：
　　text-overflow : clip | ellipsis
　　参数：
　　clip : 　不显示省略标记（…），而是简单的裁切
　　（clip这个参数是不常用的！）
　　ellipsis : 　当对象内文本溢出时显示省略标记（…）
　2，文字超出几行时显示省略，其实这个需求如果纯粹用css实现，我感觉效果不太好，一个是兼容性的问题，目前支持webkit内核的浏览器及移动端
　 类似：
　
这种效果　
实现方式：

div{
   display: -webkit-box;//弹性盒子布局
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;//
   overflow: hidden;
}
//兼容写法(IE8及以上)
p{//一定要设置word-break:break-all;
    position: relative; line-height: 20px; max-height: 40px;overflow: hidden;
    word-break:break-all;//文字换行
}
p::after{//在段落的结尾添加...，然后有一点渐变的效果
    content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}   

这种方式兼容性较好但是：after对低版本的IE是不支持的(IE8+)，同时无论文字是否超出都会出现…
这样的最终效果：

参数：
-webkit-box-orient：
horizontal 在水平行中从左向右排列子元素
vertical 从上向下垂直排列子元素
inline-axis 沿着行内轴来排列子元素（映射为 horizontal）
block-axis 沿着块轴来排列子元素（映射为 vertical
inherit 应该从父元素继承 box-orient 属性的值。
-webkit-line-clamp:
　　 规定块元素的文本行数，这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
为了实现该效果，它需要组合其他外来的WebKit属性

3，上面说的这种方式其实我个人是不太喜欢的。一是因为这种方式限比较多，效果往往发达不到需求的效果个人比较推崇通过脚本去实现。比如我们设定100个字后的文字显示…我们可以计算字符串的长度，然后将超过100的字符截去了，新的字符串后添加上我们想要显示的内容。这样是可定制化比较高，效果往往比较好，具体可以参考一下知乎网页的效果

特此申明，由于我比较善于写‘通假字’，所以莫怪。