前言

由于在平时工作期间总会遇到文字溢出以省略号的形式显示，故写下此文，便于日后查看

单行文字溢出显示省略号

.box {
    width: 120px;
    text-overflow: ellipsis;   /* 显示省略符号 ... 来代表被修剪的文本 */
    overflow: hidden;
    white-space: nowrap; /* 强制一行显示 */
    border: 1px solid #ccc;
}

多行文字溢出显示省略号

.box {
    display: -webkit-box; /* 元素类型转换 */ 
    width: 120px;
    -webkit-box-orient: vertical; /* 设置弹性盒子垂直排列 */
    text-overflow: ellipsis;
    -webkit-line-clamp: 2; /* 控制要显示的行数 */
    overflow: hidden;
    border: 1px solid #ccc;
}