css文字超长省略号

/* 示例代码：实现文字超长时显示省略号 */

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

解释说明：

1. white-space: nowrap;：防止文本换行，确保所有内容都在同一行内显示。
2. overflow: hidden;：当文本超出容器的宽度时，超出的部分会被隐藏。
3. text-overflow: ellipsis;：当文本被截断时，使用省略号（...）来表示被隐藏的内容。
4. width: 200px;：设置一个固定的宽度，以便更好地观察省略号的效果。你可以根据需要调整这个值。

如果你的应用场景是多行文本的省略，可以参考以下代码：

.multi-line-ellipsis {
  display: -webkit-box;         /* 使用弹性盒子模型 */
  -webkit-box-orient: vertical; /* 垂直排列子元素 */
  -webkit-line-clamp: 3;        /* 限制显示的行数为3行 */
  overflow: hidden;             /* 超出部分隐藏 */
  text-overflow: ellipsis;      /* 超出部分用省略号表示 */
}

解释说明：

1. display: -webkit-box;：使用弹性盒子模型布局。
2. -webkit-box-orient: vertical;：设置子元素垂直排列。
3. -webkit-line-clamp: 3;：限制显示的行数为3行，超出部分用省略号表示。
4. overflow: hidden; 和 text-overflow: ellipsis;：与单行省略号类似，用于处理超出部分的隐藏和省略号显示。