如图：

关键点：

• 文本超出了隐藏

overflow: hidden;

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

text-overflow: ellipsis;

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

white-space: nowrap;

实现单行文本超出省略：

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

实现多行文本超出省略：

• 在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;
          /*??????????*????????????????3
            height: 120px;
            overflow: hidden;
        }
        .p3::after {
            content: '...';
            position: absolute;
            bottom: 0;
            right: 0;
            background: #fff;
        }

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