css ellipsis

作者：佳凝皓月发布日期:2026-06-30 浏览:47

/* 示例代码：使用 CSS 实现文本溢出时显示省略号 */

.ellipsis {
  /* 设置宽度 */
  width: 200px;

  /* 设置为单行显示 */
  white-space: nowrap;

  /* 超出部分隐藏 */
  overflow: hidden;

  /* 文本溢出时显示省略号 */
  text-overflow: ellipsis;
}

解释说明：

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

上一篇：input css

下一篇：css上下渐变