css超出省略

/* 单行文本超出省略 */
.single-line {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden;    /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
  width: 200px;        /* 设置一个固定的宽度 */
}

/* 多行文本超出省略 */
.multi-line {
  display: -webkit-box; /* 使用弹性盒模型 */
  -webkit-box-orient: vertical; /* 设置子元素垂直排列 */
  -webkit-line-clamp: 3; /* 设置显示的行数 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
  width: 200px; /* 设置一个固定的宽度 */
}

解释说明：

1. 单行文本超出省略：

   • white-space: nowrap;：防止文本换行，确保所有内容在一行内显示。
   • overflow: hidden;：超出容器的部分会被隐藏。
   • text-overflow: ellipsis;：当文本超出容器时，用省略号（...）来表示被截断的部分。
   • width: 200px;：设置一个固定的宽度，以便测试效果。

2. 多行文本超出省略：

   • display: -webkit-box;：使用弹性盒模型，支持多行文本的省略。
   • -webkit-box-orient: vertical;：设置子元素垂直排列，使文本按行显示。
   • -webkit-line-clamp: 3;：设置显示的行数为3行，超出部分会用省略号表示。
   • overflow: hidden;：超出容器的部分会被隐藏。
   • text-overflow: ellipsis;：当文本超出容器时，用省略号（...）来表示被截断的部分。
   • width: 200px;：设置一个固定的宽度，以便测试效果。