CSS 实现文本溢出省略号显示 | 超出边框显示省略号

可以使用 CSS 的文本溢出属性 (text-overflow)，配合 white-space 和 overflow 属性一起使用，来实现文本溢出省略号的效果。

具体的实现步骤如下：

1. 首先给容器设置一个固定的宽度和高度，并设置 overflow: hidden，这样就能隐藏超出容器范围的文本。

2. 接着设置 white-space 属性为 nowrap，这样文本就不会换行。

3. 最后设置 text-overflow 属性为 ellipsis，表示用省略号代替超出容器范围的文本。

实现代码如下：

.container {
    width: 200px; /* 容器宽度 */
    height: 50px; /* 容器高度 */
    overflow: hidden; /* 超出部分隐藏 */
    white-space: nowrap; /* 文本不换行 */
    text-overflow: ellipsis; /* 超出部分用省略号显示 */
}

将文本放入容器中，超出容器范围的部分就会自动省略并用省略号代替。

注意：文本溢出属性只对单行文本有效，如果文本是多行的，则需要使用 JavaScript 等其他方法实现。