css两行超出省略号(教你css多行文本省略号方法)

用css处理文本超出字数显示省略号，一行文字的就是单行文本，两行起就是多行文本。今天教你css多行文本省略号方法，在WebKit浏览器或移动端，兼容性不太好，遇到这种问题，面试官的关注点更多是在于如何实现多行文本省略号处理，并且兼容性比较好。

关键点：

• 文本超出了隐藏

overflow: hidden;

• 超出部分使用...代替

text-overflow: ellipsis;

• 默认文本是自动换行的，如果是单行的话，要阻断自动换行

white-space: nowrap;

1、实现单行文本超出省略

.p1 {
            /* 超出隐藏 */
            overflow: hidden;
            /* 设置文本不自动换行 （默认会自动换行）*/
            white-space: nowrap;
            /* 设置超出的部分如何显示 */
            text-overflow: ellipsis;
        }

2、实现多行文本超出省略，实例是两行超出显示省略号

• 在WebKit浏览器或移动端（兼容性不太好）

/*在WebKit浏览器或移动端*/       
.p2 {
            /* 超出隐藏 */
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            /* 设置行数 */
            -webkit-line-clamp: 2;
            /* 设置超出的部分如何显示 */
            text-overflow: ellipsis;
        }
        /* 兼容性比较好的 */
        .p3 {
            position: relative;
            line-height: 40px;
            height: 120px;
            overflow: hidden;
        }
        .p3::after {
            content: '...';
            position: absolute;
            bottom: 0;
            right: 0;
            background: #fff;
        }

• 使用伪元素处理（兼容性好）

高度=行高*行数

      .p3 {
            position: relative;
            line-height: 40px;
            height: 120px;
            overflow: hidden;
        }
        .p3::after {
            content: '...';
            position: absolute;
            bottom: 0;
            right: 0;
            background: #fff;
        }

遇到这种问题，面试官的关注点更多是在于如何实现多行文本省略号处理，并且兼容性比较好。