在网页设计中，经常会遇到内容溢出容器的情况。当文本过长超出了设定的宽度或高度时，不仅影响页面美观，还可能导致布局混乱。这时，使用 CSS 处理溢出内容并使其以 “...” 结尾就显得尤为重要。

我们要了解 CSS 中几个关键属性。overflow 属性用于指定当内容溢出元素框时的处理方式，常见取值有 visible（默认值，内容会溢出容器）、hidden（隐藏溢出部分）、scroll（添加滚动条）和 auto（根据需要添加滚动条）。而实现 “...” 效果的关键属性是 text - overflow 和 white - space。

text - overflow 属性定义当文本溢出包含元素时如何显示，取值 ellipsis 就可以让溢出的文本显示为 “...”。但仅有这一个属性是不够的，还需要结合 white - space 属性。white - space 控制元素内的空白处理方式，我们通常将其设置为 nowrap，这样文本就不会换行，保证在一行内显示。

以一个简单的示例来说明，假设有一个宽度固定的 <div> 元素，里面包含一段较长的文本。首先设置 <div> 的宽度，例如 width: 200px;，然后添加 overflow: hidden; 来隐藏溢出部分，text - overflow: ellipsis; 使溢出文本显示为 “...”，white - space: nowrap; 防止文本换行。代码如下：

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

在实际应用中，这种方法适用于标题、列表项等需要在有限空间内展示文本的场景。如果是多行文本溢出的情况，处理起来会稍微复杂一些。可以使用 display: -webkit - box;、-webkit - box - orient: vertical; 和 -webkit - line - clamp: [行数]; 这些属性来实现多行文本的溢出显示 “...”。例如，要实现最多显示两行文本并在溢出时显示 “...”，代码如下：

div {
    display: -webkit - box;
    -webkit - box - orient: vertical;
    -webkit - line - clamp: 2;
    overflow: hidden;
}

通过合理运用这些 CSS 属性，我们可以轻松处理溢出内容，让页面布局更加整洁美观，提升用户体验。无论是单行还是多行文本，都能以优雅的 “...” 形式展示溢出部分，为网页设计增添专业感。