css多余文字显示省略号

作者：蓝梦月影发布日期:2025-03-09 浏览:387

/* 示例代码：当文本内容超出容器宽度时，显示省略号 */

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

解释说明：

white-space: nowrap;：防止文本在容器内自动换行，确保所有文本都在同一行显示。
overflow: hidden;：隐藏超出容器宽度的内容，避免内容溢出到外部。
text-overflow: ellipsis;：当文本超出容器宽度时，使用省略号 (...) 来表示被截断的部分。
width: 200px;：设置容器的固定宽度，确保有明确的边界来触发省略号效果。

上一篇：css两端对齐怎么设置

下一篇：css设置背景图片大小自适应