css超出宽度显示省略号

作者：浪子无家发布日期:2025-03-29 浏览:77

/* 示例代码：当文本超出容器宽度时显示省略号 */

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

解释说明：

white-space: nowrap;：防止文本换行，确保所有内容在一行内显示。
overflow: hidden;：当文本超出容器的宽度时，超出的部分会被隐藏。
text-overflow: ellipsis;：当文本被截断时，使用省略号（...）来表示被隐藏的内容。
width: 200px;：设置容器的宽度，确保有明确的边界来触发省略号效果。你可以根据需要调整这个值。

将上述样式应用到一个 HTML 元素上，当该元素内的文本超出指定宽度时，超出部分会自动显示为省略号。

上一篇：css放大属性

下一篇：css内联样式