【CSS场景实现】实现溢出文字显示省略号

溢出文字显示省略号

使用场景：

单行文字显示省略号，使用步骤分为三步：

1. 必定给宽度，隐藏多余的文字。
2. 强制一行显示文字。（否则换行了）
3. 超出的部分显示省略号。

.box {
    width: 160px;
    border: 1px solid red;
    /* 1.强制文字一行显示 (nowrap 不允许换行)*/
    white-space: nowrap;
    /* 2. 溢出隐藏 */
    overflow: hidden;
    /* 3. 溢出的文字省略号(ellipsis)显示 */
    text-overflow: ellipsis;
}