css文字不换行省略号

作者：二分醒amor 发布日期:2025-11-07 浏览:100

/* 示例代码：实现文字不换行并在超出容器宽度时显示省略号 */

.text-ellipsis {
  white-space: nowrap; /* 强制在同一行内显示所有文本，直到文本结束或者遇到 <br> 标签 */
  overflow: hidden;    /* 超出容器部分隐藏 */
  text-overflow: ellipsis; /* 当文本溢出时，用省略号表示 */
  width: 200px;        /* 设置一个固定宽度，以便测试效果 */
}

解释说明：

white-space: nowrap;：强制文本在同一行内显示，防止自动换行。
overflow: hidden;：当文本内容超出容器的宽度时，超出的部分会被隐藏。
text-overflow: ellipsis;：当文本被截断时，在容器的末尾显示省略号（...）。
width: 200px;：设置容器的宽度，确保有足够的情况来触发省略号效果。你可以根据实际需求调整这个值。

这样，当文本内容超过容器宽度时，超出部分会被隐藏，并在末尾显示省略号。

上一篇：css hidden

下一篇：css3 loading