css实现一行显示省略号

在 CSS 中，你可以使用text-overflow: ellipsis;来实现一行显示省略号。当文本内容超出容器的宽度时，text-overflow: ellipsis;会将多余的文本用省略号代替，并截断显示，示例如下：

div {
    width: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

在上述代码中，div为父元素，设置width: 100px;来规定容器宽度，white-space: nowrap;使文本不会换行，text-overflow: ellipsis;将超出容器宽度的文本用省略号代替，overflow: hidden;用于隐藏超出容器的内容。

请注意，该方法仅适用于文本内容超出容器宽度的情况，如果你需要对多行文本进行省略号显示，需要使用其他方法，例如-webkit-line-clamp属性。

鹏仔前端 https://www.pjxi.com/