html中省略超出部分是一种常见的设计需求。当文本内容溢出边界时，我们通常会将它截断并用省略号代替。这样做不仅可以使内容看起来更整洁，而且还可以提供更好的用户体验。本文将介绍如何使用 css 实现 html 省略超出部分效果。
text-overflow 属性
在实现 HTML 省略超出部分的效果时，我们通常使用 CSS 的 text-overflow 属性。它的功能是指定了当一个元素中的文本内容溢出其容器时，应该如何处理超出部分。
该属性有 3 种取值：
-
clip：默认值，超出部分将被裁剪掉，不显示。 -
ellipsis：超出部分用省略号代替。 -
string：超出部分用给定字符串代替。
其中，最常用的是 ellipsis，因为它能够简单快速地实现省略号效果。
white-space 属性
在使用 text-overflow 属性时，我们还需要设置 white-space 属性。该属性指定元素中的空白如何处理。默认值是 normal，表示合并连续的空白字符并将换行符转换为空格。
立即学习“前端免费学习笔记（深入）”；
如果我们要在文本中保留连续的空格字符，就需要将 white-space 属性设置为 pre-wrap。而且，只有在 white-space 属性被设置为 nowrap 和 pre-wrap 时，text-overflow 才会生效。
使用 CSS 实现省略号效果
下面是一个使用CSS实现省略号效果的例子：
<style>
.ellipsis {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<div class="ellipsis">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat magna vel leo sollicitudin convallis. Sed vestibulum auctor purus a tristique.
</div>在上面的例子中，我们创建了一个具有宽度的块级元素，用以容纳文本内容。接着，我们将 white-space 属性设置为 nowrap，这样文本中的连续空格就不会被合并。我们使用 overflow 属性将溢出部分隐藏，并使用 text-overflow: ellipsis 将其替换为省略号。
适当的使用省略号效果
尽管使用省略号效果可以使内容更加整洁，但我们还需要适当的使用省略号来确保用户体验。以下是一些适当使用 HTML 省略号的建议：
- 只在必要的地方使用省略号。如果将所有文本都用省略号代替，这将使用户感到困惑，因为他们不知道被隐藏的文本内容是什么。
- 为省略号预留足够的空间。通常，我们应该给省略号留下一定的空间，以确保用户能够正确地理解文本内容的截断部分。
- 在阅读长段落文本时使用省略号。文本中的省略号通常用于读者“快速跳过”不必要信息的情况，例如大段的评论或者长度超出屏幕宽度的文章。在这种情况下，省略号可以提供更好的用户体验，因为它让读者能更容易地理解文本的概要内容。
总结
在本文中，我们介绍了如何在HTML中使用CSS实现省略超出部分的效果。我们主要使用 text-overflow 和 white-space 属性来达到这个目的。最后，我们还给出了一些适当使用省略号的建议，以帮助您优化用户体验。
