CSS：你能防止overflow: hidden截断最后一行文本吗

在本文中，我们将介绍CSS中的overflow: hidden属性以及如何解决其截断最后一行文本的问题。

阅读更多：CSS 教程

什么是overflow: hidden属性?

CSS的overflow属性用于控制元素内容的溢出如何被处理。其中，overflow: hidden属性表示当元素内容超出其指定尺寸时，溢出部分将被隐藏。

该属性通常用于容器元素中，比如一个固定高度和宽度的div盒子。在这种情况下，当容器中的内容超出容器尺寸时，会自动隐藏超出部分，达到隐藏溢出内容的效果。

overflow: hidden引起的问题

然而，当容器中的内容是文本时，使用overflow: hidden属性可能会导致最后一行文本被截断，这对于用户阅读体验是不友好的。

例如，我们有一个限制高度的div容器，并且该容器内有一段文本。当文本超出容器高度时，overflow: hidden将会隐藏超出部分。但如果最后一行文本被截断，用户将无法阅读完整的内容。

下面是一个示例代码，展示了这个问题：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  height: 100px;
  width: 200px;
  overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum erat vel sapien placerat maximus. Donec lectus risus, fermentum et facilisis id, volutpat vitae justo.
</div>
</body>
</html>

在上面的代码中，我们创建了一个固定高度和宽度的div容器，并且使用overflow: hidden属性来隐藏超出容器高度的文本。然而，当文本内容超出容器高度时，最后一行文本会被截断，用户无法看到完整的句子。

解决overflow: hidden截断最后一行文本的问题

为了解决overflow: hidden属性导致最后一行文本截断的问题，我们可以通过一些技巧来改善用户的阅读体验。

添加额外的内边距

第一个解决方法是在容器底部添加额外的内边距(padding-bottom)。通过给容器底部添加一定的空间，超出容器高度的文本就可以在这个空间中显示，而不会被截断。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  height: 100px;
  width: 200px;
  overflow: hidden;
  padding-bottom: 20px; /* 添加额外的内边距 */
}
</style>
</head>
<body>
<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum erat vel sapien placerat maximus. Donec lectus risus, fermentum et facilisis id, volutpat vitae justo.
</div>
</body>
</html>

通过给容器底部添加20px的内边距，我们预留了足够的空间来显示超出容器高度的文本。这样，用户就能够看到完整的内容，而不会被截断。

使用伪元素

第二种解决方法是使用伪元素(:after)来创建一个与容器高度相同的虚拟容器，并包裹超出高度的文本。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  height: 100px;
  width: 200px;
  overflow: hidden;
  position: relative;
}

.container::after {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  bottom: 0;
  background: linear-gradient(transparent, white); /* 渐变背景 */
}
</style>
</head>
<body>
<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum erat vel sapien placerat maximus. Donec lectus risus, fermentum et facilisis id, volutpat vitae justo.
</div>
</body>
</html>

在上面的代码中，我们使用伪元素::after来创建一个与容器高度相同的虚拟容器。通过设置虚拟容器的背景为从透明到白色的线性渐变，超出容器高度的文本就能够在虚拟容器中显示出来，而不会被截断。