CSS Overflow:hidden 在末尾显示省略号

在本文中，我们将介绍如何使用CSS的 overflow:hidden 属性来在文本末尾显示省略号。

阅读更多：CSS 教程

什么是Overflow:hidden？

CSS的 overflow:hidden 属性用于控制元素溢出内容的处理方式。当给定元素的内容超出其可见范围时，可以通过设置 overflow:hidden 来隐藏或裁剪溢出的内容。

使用Overflow:hidden显示省略号

要在文本末尾显示省略号，我们可以将 text-overflow 属性与 overflow:hidden 结合使用。 text-overflow 属性用于指定溢出文本的处理方式。

首先，确保文字内容包含在一个容器元素中，例如一个 <div> 元素。然后，设置容器元素的 width 和 overflow:hidden 属性。

可以使用以下CSS代码来实现这个效果：

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

在上面的示例中，我们将容器元素的宽度设置为300像素，并将 overflow 属性设置为 hidden，这样超过容器宽度的文本内容就会被隐藏。

接下来，我们将 text-overflow 属性设置为 ellipsis，表示当文本超出容器时，在文本末尾显示省略号。

最后，我们还需要将 white-space 属性设置为 nowrap，以确保文本不会换行，而是在一行内显示。

示例

下面是一个完整的示例，展示如何使用 CSS 的 overflow:hidden 属性来在文本末尾显示省略号：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid black;
  padding: 5px;
}
</style>
</head>
<body>

<div class="container">
  This is some long text that will be truncated at the end with an ellipsis.
</div>

</body>
</html>

在上面的示例中，我们创建了一个宽度为300像素的容器，并使用 overflow:hidden 属性来控制文本内容的溢出。通过设置 text-overflow: ellipsis 属性，文本超出容器宽度时将显示省略号。