CSS - 文字超出省略号

单行文本设置溢出省略号

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

多行文本设置溢出省略号
方法一：

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

因为多行文本设置使用了webkit的css扩展属性，该方法只适用于webkit浏览器和移动端

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。需要和其他的webkit属性结合才能生效
display:-webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒的子元素的排列方式
方法二：

  

  p {
        position:relative;
        line-height:20px;
        max-height:40px;//height设置成line-height的整数倍，防止超出的文字漏出
        overflow:hidden;
    }
    p:after {
        content:"...";
        position:absolute;
        bottom:0;
        right:0;
        padding-left:40px;
        background:linear-gradient(to right,transparent,#fff 55%)//添加渐变背景避免文字只显示一半
    }

注释：
text-overflow
确定如何向用户展示未显示的溢出内容，可以显示为一个省略号…或者一个自定义的字符串。对应的值如下

        1.clip //在内容区域的极限处截断文本，为了防止在字符的中间发生截断，需要使用空字符串作为值。此为默认值
        2.ellipasis //用一个省略号来表示被截断的文本。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小省略号也会被截断
        3.<string> //用来表示被截断的文本。字符串内容将被添加在内容区域中，所以会减少显示出的文本，如果空间太小字符串也会被截断
white-space
white-space用来设置如何处理元素中的空白
值如下：

        1.normal 连续的空白符会被合并，换行符会被当做空白符来处理。换行在填充时【行框盒子（line boxes）】是必要的
        2.nowrap 和normal一样，连续的空白符会被合并。但文本内的换行无效
        3.pre 连续的空白符会被保留。在遇到换行符或者<br>才会换行
        4.pre-warp 连续的空白符会被保留。在遇到换行符或者<br>元素，或者需要为了填充【行框盒子（line-boxes）】时才会换行
        5.pre-line 连续的空白符会被合并。在遇到换行符或者<br>元素，或者需要为了填充【行框盒子（line-boxes）】时会换行
        6.break-spaces 与pre-wrap的行为相同，除了：
                .任何保留的空白序列总会占用空间，包括在行尾
                .每个保留的空格字符后都存在换行机会，包括空格字符之间
                .这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。

white-space值行为