css 文本超出就隐藏并且显示省略号

作者：°妮可罗宾发布日期:2025-06-04 浏览:39

/* 示例代码：当文本超出容器宽度时，隐藏多余部分并显示省略号 */

.text-ellipsis {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden;    /* 隐藏超出容器的内容 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
  width: 200px;        /* 设置容器的宽度，可以根据需要调整 */
}

解释说明：

white-space: nowrap;：防止文本换行，确保所有文本都保持在一行内。
overflow: hidden;：隐藏超出容器宽度的内容，避免内容溢出。
text-overflow: ellipsis;：当文本超出容器宽度时，用省略号（...）代替超出的部分。
width: 200px;：设置容器的宽度，你可以根据实际需求调整这个值。

这样设置后，当文本内容超出容器宽度时，超出的部分会被隐藏，并显示为省略号。

上一篇：css径向渐变

下一篇：css隐藏元素