CSS 段落省略号

在 Web 设计中，经常会遇到文本内容溢出盒子边界的问题。这时，我们可以使用 CSS 的 overflow 属性来控制文本内容的显示方式，将溢出的内容隐藏在盒子内部。

然而，在某些情况下，我们希望只隐藏超过一定长度的文本内容，并在超出部分的末尾显示省略号。这时，我们可以使用 CSS 的 text-overflow 属性来实现这个效果。

实现方式

首先，我们需要将文本内容放置在一个固定宽度的块级容器中，并为其设置 overflow 属性为 hidden 或者 auto。然后，我们需要将文本内容的显示方式设置为单行，并且禁用文本换行和文字换行。

最后，我们可以使用 text-overflow 属性来定义文本内容超出容器显示范围时的省略方式。

下面是一个示例代码片段：

.container {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

在上面的代码中，我们创建了一个名为 container 的类，并为其设置了 white-space 属性，将文本内容在一行中显示；设置了 overflow 属性为 hidden，表示超出容器的内容将被隐藏；最后，使用 text-overflow 属性将超出部分的末尾显示省略号。

兼容性

需要注意的是，text-overflow 属性在不同的浏览器中的实现方式可能会有所不同，兼容性也不完全相同。在大多数现代浏览器中，text-overflow 属性都得到了良好的支持，但是在一些旧版的浏览器中可能会出现兼容性问题。

在使用 text-overflow 属性时，建议先进行兼容性测试，确保在各种现代浏览器中都能正常运行。

总结

CSS 的 text-overflow 属性可以帮助我们在文本内容溢出容器时，将超出部分隐藏并在末尾显示省略号。通过正确地设置 overflow、white-space 和 text-overflow 属性，我们可以轻松地实现这个效果。需要注意的是，在不同浏览器中的兼容性可能会有所不同，需要进行兼容性测试。