CSS 省略号表示溢出文本|极客教程

CSS 省略号表示溢出文本

概述

在网页开发中，经常会遇到文本内容过长而无法完全展示的情况。这时，我们可以使用 CSS 的省略号属性来表示文本的溢出，以便节省空间，改善用户体验。

CSS 的省略号属性可以应用于单行文本和多行文本的溢出表示。对于单行文本的溢出，我们可以通过 text-overflow 属性来控制省略号的展示样式；而对于多行文本的溢出，我们需要结合使用 display, overflow, text-overflow 等属性来实现。

在本文中，我们将详细介绍单行文本和多行文本的省略号表示方法，并提供示例代码来演示效果。

单行文本省略号

text-overflow 属性

在 CSS 中，text-overflow 属性用于控制文本溢出时的显示样式。它可以接受以下三个值：

clip：将溢出的文本简单地裁剪掉，不显示省略号。
ellipsis：在溢出的位置显示省略号。
string：使用自定义的字符串来表示溢出的文本。

text-overflow 属性只在以下条件下才会生效：

元素必须设置了 white-space: nowrap; 属性，以使文本强制在一行中显示。
元素必须设置了 overflow: hidden; 属性，以防止多余文本的显示。

下面是一个示例代码，展示了如何使用 text-overflow 属性来实现单行文本的省略号表示：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
</head>
<body>

<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</div>

</body>
</html>

运行上述示例代码，我们可以看到文本被裁剪，并在最后显示了省略号。

多行文本省略号

对于多行文本的溢出表示，CSS 没有直接提供类似 text-overflow 属性的解决方案。但我们可以通过结合使用 display, overflow, text-overflow 等属性来实现多行文本的省略号表示。

使用 `-webkit-line-clamp`

在某些浏览器（如 Chrome、Safari）中，我们可以利用 -webkit-line-clamp 属性来实现多行文本的省略号。这个属性接受一个数字作为参数，用于指定最大显示的行数。

下面是一个示例代码，展示了如何使用 -webkit-line-clamp 属性来实现多行文本的省略号表示：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
</head>
<body>

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante sem, luctus vitae accumsan at, tincidunt non tortor. Vestibulum nec sapien vel magna gravida vestibulum ut ut neque. Praesent ultricies justo at scelerisque aliquam. Pellentesque velit tellus, faucibus vel risus a, pharetra porta magna. Sed dictum consectetur felis in fermentum.</p>
</div>

</body>
</html>

运行上述示例代码，我们可以看到文字超过三行后被裁剪，并在最后一行显示了省略号。

使用 JS 库

除了以上方法，我们还可以通过使用一些 JavaScript 库来实现多行文本的省略号表示。这些库可以在其他浏览器中兼容，并且提供了更多的定制化选项。

其中一种常用的库是 line-clamp.js，它是基于 CSS 的 -webkit-line-clamp 属性进行二次封装的。使用这个库，我们只需要简单地引入相应的 JavaScript 文件，并给需要省略号表示的元素添加相应的类名即可。

下面是一个使用 line-clamp.js 库的示例代码：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="line-clamp.min.css">
<script src="line-clamp.min.js"></script>
</head>
<body>

<p class="line-clamp-3">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante sem, luctus vitae accumsan at, tincidunt non tortor. Vestibulum nec sapien vel magna gravida vestibulum ut ut neque. Praesent ultricies justo at scelerisque aliquam. Pellentesque velit tellus, faucibus vel risus a, pharetra porta magna. Sed dictum consectetur felis in fermentum.
</p>

</body>
</html>

运行上述示例代码，我们可以看到文字超过三行后被裁剪，并在最后一行显示了省略号。

总结

通过使用 CSS 的省略号属性，我们可以方便地实现文本溢出时的省略号表示，改善用户体验。对于单行文本，我们可以使用 text-overflow 属性来实现；对于多行文本，在某些浏览器中可以使用 -webkit-line-clamp 属性，而在其他浏览器中可以通过使用 JavaScript 库来实现。选择适合自己项目需求的方法，并根据实际情况进行调整和优化。