单行文本设置溢出省略号

{
    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值行为

在这里插入图片描述