CSS单行省略号和多行省略号CSS单行省略号 CSS多行省略号。因为工作中经常用到这些东西，但又会经常忘记，因此这里简单

因为工作中经常用到这些东西，但又会经常忘记，因此这里简单记录下。

CSS单行省略号

.oneline-ellipsis {
    overflow: hidden; /* 隐藏超出容器的文本 */
    text-overflow: ellipsis; /* 使用省略号替换隐藏的文本 */
    white-space: nowrap; /* 禁止文本自动换行 */
}

CSS多行省略号

.multiline-ellipsis {
    display: -webkit-box; /* 将元素作为贪心伸缩盒子模型展示 */
    -webkit-box-orient: vertical; /* 设置盒子模型的排列方向为垂直 */
    -webkit-line-camp: 3; /* 显示最大行数，这里设置为3行 */
    overflow: hidden; /* 隐藏超出的文本 */
    text-overflow: ellipsis;
    word-break: break-all;
}