css超出省略号

作者：疯狂灭世发布日期:2025-03-02 浏览:73

/* 设置元素为单行显示，并在超出容器宽度时使用省略号 */
.ellipsis {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 使用省略号表示被修剪的文本 */
  width: 200px; /* 设置容器宽度 */
}

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

解释说明：

white-space: nowrap;：防止文本换行，确保所有文本都显示在同一行。
overflow: hidden;：隐藏超出容器宽度的内容，避免内容溢出。
text-overflow: ellipsis;：当文本超出容器宽度时，使用省略号（...）来表示被修剪的文本。
width: 200px;：设置容器的宽度，可以根据实际情况调整。

上一篇：css注释

下一篇：css伪类