CSS3如何用省略号显示超出文本的内容？

在CSS3中，你可以使用text-overflow属性配合overflow和white-space属性来实现文本内容超出容器时显示省略号（...）。以下是一个简单的示例：

.text-ellipsis {
    display: block;
    width: 200px;  /* 设置容器宽度 */
    white-space: nowrap;  /* 防止文本换行 */
    overflow: hidden;  /* 隐藏超出容器的文本 */
    text-overflow: ellipsis;  /* 显示省略号 */
}

在这个示例中，.text-ellipsis类被应用到一个块级元素上，该元素的宽度被设置为200像素。white-space: nowrap;确保文本不会换行，overflow: hidden;隐藏任何超出容器宽度的文本，而text-overflow: ellipsis;则在这些隐藏的文本位置显示省略号。

你可以将这个类应用到任何你想要显示省略号的元素上，例如：

<div class="text-ellipsis">
    这是一段很长的文本，它可能会超出容器的宽度，但是我们希望用省略号来表示它被截断了。
</div>

在这个例子中，如果文本长度超过了200像素，那么它将会被截断，并在末尾显示省略号。