css文字溢出隐藏

作者：—只賣身不賣藝发布日期:2025-11-07 浏览:113

/* 示例代码：CSS文字溢出隐藏 */

.text-overflow {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden;    /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 用省略号表示被隐藏的文本 */
  width: 200px;        /* 设置容器宽度，可以根据需要调整 */
}

解释说明：

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

将上述样式应用到HTML元素上，即可实现文字溢出时自动隐藏并显示省略号的效果。

上一篇：css3 渐变

下一篇：css 遮罩层