css超出显示省略号

作者：只影天涯发布日期:2025-01-24 浏览:141

/* 设置元素的宽度，并确保文本在一行内显示 */
.ellipsis {
  width: 200px; /* 设置一个固定的宽度 */
  white-space: nowrap; /* 强制文本在一行内显示 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
}

解释说明：

width: 200px;：设置元素的固定宽度，可以根据实际情况调整。
white-space: nowrap;：强制文本在一行内显示，不换行。
overflow: hidden;：当文本内容超出容器宽度时，超出的部分会被隐藏。
text-overflow: ellipsis;：当文本溢出时，使用省略号（...）来表示被截断的文本。

这样设置后，当文本内容超出指定宽度时，超出部分会自动显示为省略号。

上一篇：position在css中的用法

下一篇：css文本换行