css 显示省略号

作者：寂寞味道发布日期:2025-06-14 浏览:38

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

解释说明：

white-space: nowrap;：防止文本在遇到容器边界时自动换行，确保所有文本都在同一行内显示。
overflow: hidden;：当文本内容超出容器宽度时，隐藏溢出的部分。
text-overflow: ellipsis;：当文本溢出时，在容器末尾显示省略号（...）来表示被截断的内容。
width: 200px;：设置容器的固定宽度，以便更好地控制文本的显示效果。

上一篇：css ~

下一篇：css3 loading