css超长显示省略号

作者：古枕清风发布日期:2026-06-18 浏览:102

/* CSS 代码用于处理超长文本显示省略号 */

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

解释说明：

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

将上述样式应用到 HTML 元素上即可实现超长文本显示省略号的效果。

上一篇：css img

下一篇：css 三角形箭头