css溢出文字隐藏显示省略号

作者：殘沫灕汐发布日期:2026-02-13 浏览:65

/* 设置元素的宽度和高度，并隐藏溢出的文字，显示省略号 */
.ellipsis {
  width: 200px; /* 设置元素的宽度 */
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 溢出部分显示为省略号 */
}

<!-- HTML 示例 -->
<div class="ellipsis">
  这是一段非常长的文字，用于演示如何在CSS中实现溢出文字隐藏并显示省略号。
</div>

解释说明：

width: 200px;：设置元素的固定宽度，确保当内容超出这个宽度时会触发溢出处理。
white-space: nowrap;：防止文本自动换行，确保所有内容都在同一行内显示。
overflow: hidden;：隐藏超出容器宽度的内容，避免内容溢出到外部。
text-overflow: ellipsis;：当内容超出容器宽度时，在末尾显示省略号（...）。

这样可以确保当文字过长时，超出部分会被隐藏，并用省略号代替。

上一篇：css animation 循环播放

下一篇：css文本垂直居中