内容过长显示省略号

要在 CSS 中实现当内容过长时显示省略号，可以使用 text-overflow 属性。结合 overflow 和 white-space 属性，可以实现不同情况下的文本溢出处理。

以下是实现省略号显示的常见方法：

1. 单行文本省略号显示：

.single-line {
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 显示省略号 */
}

1. 多行文本省略号显示：

.multi-line {
    display: -webkit-box; /* 使用老版本的flexbox */
    -webkit-box-orient: vertical; /* 设置为垂直方向 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 显示省略号 */
    -webkit-line-clamp: 2; /* 控制行数 */
}

这个例子中，.multi-line 类将文本限制为两行，并在第二行之后显示省略号。

1. 在容器底部显示省略号：

.bottom-ellipsis {
    display: block;
    max-width: 100%; /* 保证不超出容器宽度 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* 不换行 */
}