一. 前言

在实际开发中我们经常会遇到文字后面使用省略号的问题, 下面是常用的两种方法

二. 单行文本溢出显示省略号

此处要注意盒子必须设置宽度,超出部分会显示省略号

.box {
        width: 80px;
        /*溢出部分隐藏*/
        overflow: hidden;
        /*禁止换行*/
        white-space: nowrap;
        /*显示省略号*/
        text-overflow: ellipsis;
    }

效果对比:

• 结构

• 效果

三. 多行文本溢出显示省略号

此处要注意盒子必须设置宽度与行数,超出部分会显示省略号

.box {
        width: 100px;
        /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
        display: -webkit-box;
        /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
        -webkit-box-orient:vertical;
        /*要显示的行数*/
        -webkit-line-clamp:3;
        /* 溢出部分隐藏 */
        overflow:hidden;
    }

效果对比:

• 结构

• 效果