CSS 在div/span元素溢出时添加省略号/点号而不使用jQuery

在本文中，我们将介绍如何在div/span元素溢出时使用纯CSS添加省略号/点号，而不需要使用jQuery。

阅读更多：CSS 教程

什么是溢出？

当内容超出元素的宽度或高度时，就会发生溢出。溢出可以在div、span或其他具有可滚动性或自适应大小的元素中发生。

使用CSS的text-overflow属性

CSS的text-overflow属性可以用于在元素内容溢出时添加省略号/点号。text-overflow属性需要结合其他属性来实现这个效果。

溢出隐藏和换行

为了使text-overflow属性生效，必须先将溢出的内容隐藏，并禁用换行。这可以通过设置overflow属性为hidden，并使用white-space属性设置为nowrap来实现。

.overflow-element {
   overflow: hidden;
   white-space: nowrap;
}

在上述示例中，.overflow-element是一个类名，你可以将其应用于你想要添加省略号的div或span元素中。

添加省略号

完成溢出隐藏和禁用换行后，接下来就可以使用text-overflow属性来添加省略号。text-overflow有三个可选值：clip、ellipsis和string。在本文中，我们将着重介绍如何使用ellipsis值来添加省略号。

.overflow-element {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

上述示例中的CSS代码将在元素内容溢出时，自动添加省略号。

示例

让我们通过一个示例来说明如何在HTML中应用上述的CSS代码。

<div class="overflow-element">
   This is a long text that will be truncated with ellipsis if it overflows.
</div>

在上述示例中，我们在div元素中添加了一个类名，该类名为我们刚刚定义的CSS样式.overflow-element。当div元素的内容超出宽度时，将自动添加省略号。

文本省略号和换行

有时我们希望添加省略号的同时保留换行。在这种情况下，我们需要松散约束white-space属性。

.overflow-element {
   overflow: hidden;
   white-space: normal;
   word-wrap: break-word;
   text-overflow: ellipsis;
}

使用上述示例中的CSS代码，我们可以在文本溢出时添加省略号，并保留换行。这对于显示多行文本的元素很有用。

总结

本文介绍了如何在div/span元素溢出时使用纯CSS添加省略号/点号，而不需要使用jQuery。通过结合text-overflow属性、overflow属性和white-space属性，我们可以实现在元素溢出时自动添加省略号的效果。我们还讨论了如何保留换行的情况，并给出了相关的CSS代码示例。掌握这些技巧将帮助你更好地处理元素内容溢出的情况。