css超出...

/* 示例代码：当内容超出容器时进行处理 */

/* 1. 超出隐藏 */
.container-hide {
  width: 200px;
  height: 100px;
  overflow: hidden; /* 当内容超出容器时，隐藏超出部分 */
}

/* 2. 溢出时显示滚动条 */
.container-scroll {
  width: 200px;
  height: 100px;
  overflow: auto; /* 当内容超出容器时，显示滚动条 */
}

/* 3. 文字超出省略号 */
.text-ellipsis {
  width: 200px;
  white-space: nowrap; /* 强制不换行 */
  overflow: hidden;
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
}

/* 4. 多行文字超出省略号 */
.text-multi-line-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 设置显示的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
}

解释说明：

1. overflow: hidden;：当内容超出容器的宽度或高度时，超出的部分将被隐藏。
2. overflow: auto;：当内容超出容器时，会自动显示滚动条以便用户可以滚动查看超出的内容。
3. text-overflow: ellipsis;：当文本超出容器宽度时，超出的部分会被省略号（...）替代，适用于单行文本。
4. 多行文本省略：通过 -webkit-line-clamp 属性可以限制文本显示的行数，并在超出时显示省略号。