CSS 截断 div 内的文本

在本文中，我们将介绍如何使用 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 来截断 div 元素内的文本。截断文本是在显示内容时去除超出容器的部分，从而确保文本适应容器大小并且不溢出。这在设计响应式网页和移动应用程序时非常有用。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

使用 text-overflow 属性

https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 的 text-overflow 属性是控制文本截断的关键。通过此属性，我们可以定义文本溢出时应显示的样式。text-overflow 属性取三个值：clip、ellipsis 和 string。

clip：裁剪超出的文本部分。被截断的文本将被完全隐藏，不会显示省略号。
ellipsis：使用省略号来代替超出的文本。省略号通常是 ...。
string：用指定的字符串来代替超出的文本。我们可以通过设置 content 属性来指定要显示的字符串。

下面是一个使用 text-overflow 属性的示例：

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

在上面的示例中，我们首先设置了容器的宽度为 200 像素，确保容器具有适当的宽度。然后，我们使用 white-space 属性将文本限制为在一行内显示，避免换行。接下来，我们使用 overflow 属性将超出容器的文本隐藏起来。最后，我们使用 text-overflow 属性将超出的文本截断并显示省略号。

使用 max-height 和 line-clamp 属性

除了 text-overflow 属性，还可以使用 max-height 和 line-clamp 属性来截断文本。这种方法特别适用于多行文本的场景。

首先，我们使用 max-height 属性指定容器的最大高度。然后，我们使用 -webkit-line-clamp 和 -webkit-box-orient 属性来设置文本的行数和排列方向。

下面是一个使用 max-height 和 line-clamp 属性的示例：

.container {
  max-height: 100px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

在上面的示例中，我们将容器的最大高度设置为 100 像素。然后，我们使用 -webkit-box 属性来显示容器内的文本，并设置文本的行数为 3 行。接着，我们使用 -webkit-box-orient 属性将文本水平排列改为垂直排列。最后，我们使用 overflow 属性将超出容器的文本隐藏起来。

使用 jQuery 插件

除了纯 CSS 的解决方案，还可以使用 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">jQuery 插件来截断 div 内的文本。这些插件提供了更多的自定义选项和功能，可以更灵活地控制文本截断的效果。

一款常用的 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">jQuery 文本截断插件是 dotdotdot。它可以根据容器的大小动态截断文本，并自动添加省略号。

下面是一个使用 dotdotdot 插件的示例：

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

<script src="jquery.min.js"></script>
<script src="jquery.dotdotdot.min.js"></script>
<script>
(function() {(".container").dotdotdot();
});
</script>

在上面的示例中，我们首先引入了 jQuery 和 dotdotdot 插件的 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">JavaScript 文件。然后，我们在容器元素上调用 dotdotdot() 方法，来应用插件并实现文本截断效果。

总结

本文介绍了如何使用 CSS 来截断 div 元素内的文本。我们学习了使用 text-overflow 属性以及 clip、ellipsis 和 string 值来控制文本截断的样式。同时，我们还了解了使用 max-height 和 line-clamp 属性来截断多行文本。最后，我们提到了使用 jQuery 插件来实现更复杂的文本截断效果。

希望本文对您理解 CSS 截断文本的概念和技巧有所帮助。通过合理应用这些技巧，您可以在设计响应式网页和移动应用程序时，更好地管理和展示文本内容。