css超出显示...

/* 当内容超出容器时，通过以下几种方式处理 */

/* 1. 隐藏超出部分 */
.container {
  overflow: hidden;
}

/* 2. 显示滚动条 */
.container {
  overflow: auto; /* 或者 overflow: scroll; */
}

/* 3. 文本超出时用省略号表示 */
.text-ellipsis {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 4. 多行文本超出时用省略号表示 (仅适用于webkit内核浏览器) */
.multi-line-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 控制显示的行数 */
  overflow: hidden;
}

解释说明：

1. overflow: hidden;：当内容超出容器时，超出的部分会被隐藏，不会显示。
2. overflow: auto; 或 overflow: scroll;：当内容超出容器时，会显示滚动条，用户可以通过滚动查看超出的内容。auto 只在需要时显示滚动条，而 scroll 则始终显示滚动条。
3. text-overflow: ellipsis;：当文本超出容器宽度时，超出的部分会被替换为省略号（...），通常与 white-space: nowrap; 和 overflow: hidden; 一起使用。
4. 多行文本省略号：对于多行文本，可以使用 -webkit-line-clamp 来限制显示的行数，并在超出时显示省略号。注意，这种方法仅适用于 Webkit 内核的浏览器（如 Chrome、Safari）。