CSS 显示截断文本，在悬停时显示完整文本
在本文中，我们将介绍如何使用CSS来实现截断文本在正常情况下只显示部分内容，而在鼠标悬停时显示全部内容的效果。
阅读更多：CSS 教程
使用text-overflow属性来截断文本
CSS的text-overflow属性可以用来控制文本溢出时的显示效果。默认情况下，文本溢出时会自动省略显示，而不会显示剩余的部分。
.truncate {
white-space: nowrap; /* 强制不换行 */
overflow: hidden; /* 隐藏溢出部分 */
text-overflow: ellipsis; /* 用省略号表示截断 */
}
在上面的例子中，我们给具有.truncate类的元素设置了white-space属性为nowrap，这样文本就会强制在一行显示，不会换行。然后使用overflow属性将溢出部分隐藏，最后使用text-overflow属性将截断的部分用省略号表示。
在下面的示例中，我们使用了这个样式来截断显示一个长文本，当鼠标悬停在文本上时，会显示完整文本。
<!DOCTYPE html>
<html>
<head>
<style>
.truncate {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.truncate:hover {
white-space: normal; /* 悬停时取消一行显示的限制 */
overflow: visible; /* 悬停时显示全部内容 */
}
</style>
</head>
<body>
<p class="truncate">这是一个特别长的文本，当超过一定长度的时候，我们希望只显示部分文本，而在鼠标悬停的时候显示全部文本。</p>
</body>
</html>
在上面的示例中，我们给元素设置了一个固定的宽度（200px），这样当文本超过这个宽度时就会被截断。当鼠标悬停在文本上时，使用:hover伪类选择器将文本的white-space属性设置为normal，这样可以取消一行显示的限制，从而显示全部的文本。同时也将overflow属性设置为visible，这样被隐藏的部分也会显示出来。
使用data-*属性来存储完整文本
虽然上面的方法可以在悬停时显示完整文本，但是当文本很长时，可能会导致文本溢出容器的范围。为了解决这个问题，可以使用data-*属性来保存完整的文本内容，并在悬停时将其显示出来。
<!DOCTYPE html>
<html>
<head>
<style>
.truncate {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.truncate:hover::after {
content: attr(data-fulltext);
position: absolute;
top: 100%;
left: 0;
background-color: white;
padding: 5px;
}
</style>
</head>
<body>
<p class="truncate" data-fulltext="这是一个特别长的文本，当超过一定长度的时候，我们希望只显示部分文本，而在鼠标悬停的时候显示全部文本。">
这是一个特别长的文本，当超过一定长度的时候，我们希望只显示部分文本，而在鼠标悬停的时候显示全部文本。
</p>
</body>
</html>
在上面的例子中，我们使用了::after伪元素来创建一个隐藏的内容块。通过设置content属性为attr(data-fulltext)，可以将data-fulltext属性的值作为内容显示出来。同时，我们将这个内容块的位置设置为绝对定位，并将它的top属性设置为100%，这样它就会出现在截断文本下方。为了使内容块与文本容器有一定的间距，我们设置了padding属性为5px，并将背景颜色设为白色。
使用这种方法，即使完整文本很长，也不会导致它溢出容器的范围。而且，通过保存完整文本的方式，可以更好地保持HTML结构的简洁性和语义性。
总结
通过使用text-overflow属性和:hover伪类选择器，我们可以很容易地实现在截断文本在正常情况下只显示部分内容，而在鼠标悬停时显示全部内容的效果。此外，我们也介绍了使用data-*属性来存储完整文本，并在悬停时显示出来的方法，以解决文本溢出容器的问题。根据实际需求，可以选择适合的方法来实现这一效果。无论哪种方法，都可以提高用户体验，使页面更加美观和易于阅读。通过合理利用CSS的功能，我们可以轻松实现各种文本样式效果，为网页设计增加更多的可能性。
此处评论已关闭