css文字超出隐藏变省略号

作者：续写丶未来式发布日期:2025-11-18 浏览:26

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

<!-- HTML 示例 -->
<div class="text-container">
  这是一段非常长的文字，当文字超出容器宽度时会自动变成省略号。
</div>

解释说明：

width: 200px;：设置容器的固定宽度，确保文本在一个有限的空间内显示。
white-space: nowrap;：防止文本换行，确保所有文本在一行内显示。
overflow: hidden;：当文本超出容器宽度时，隐藏超出的部分。
text-overflow: ellipsis;：当文本被截断时，在末尾显示省略号（...）。

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

上一篇：css 居中

下一篇：css阴影