如何让超出宽度的文字显示为省略号？

在CSS中，你可以使用text-overflow属性来实现超出宽度的文字显示为省略号。同时，你还需要设置overflow属性为hidden，并且设置white-space属性为nowrap，以确保文字在一行内显示并且超出部分被隐藏。

以下是一个例子：

.text-ellipsis {
    width: 200px; /* 你可以设置你需要的宽度 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

然后，你可以将这个类应用到你的HTML元素上，比如：

<div class="text-ellipsis">这是一段很长的文本，超出了设定的宽度，应该显示为省略号...</div>

在这个例子中，如果.text-ellipsis类的元素的文本长度超过了200px，那么超出的部分就会显示为省略号。

注意，text-overflow: ellipsis;属性在Firefox中可能需要设置-moz-binding属性或者使用flexbox布局才能正确工作。以下是一个兼容Firefox的解决方案：

.text-ellipsis {
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -moz-binding: url('resource://gre/res/XMLBindings.xml#overflow-ellipsis');
}

或者使用flexbox布局：

.text-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

以上代码都可以实现当文本超出容器宽度时显示为省略号的效果。