css超出文字显示...

作者：蓝梦月影发布日期:2026-02-13 浏览:47

/* 当内容超出容器宽度时，用省略号 (...) 表示超出部分 */
.text-overflow {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden;    /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
  width: 200px;        /* 设置容器宽度 */
}

解释说明：

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

上一篇：css pointerevents

下一篇：css3 渐变