css超出部分隐藏，鼠标放上去展示全部？
warning:
这篇文章距离上次修改已过205天，其中的内容可能已经有所变动。
要实现文本超出部分隐藏，鼠标悬停时显示全部内容，可以使用CSS的text-overflow属性结合hover伪类。以下是实现这个效果的CSS代码示例：
/* 设置容器的宽度和省略样式 */
.text-container {
width: 200px; /* 定义容器宽度 */
white-space: nowrap; /* 确保文本在一行内显示 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
cursor: pointer; /* 将鼠标样式改为手指形状，提示可点击 */
}
/* 鼠标悬停时移除文本省略样式 */
.text-container:hover {
overflow: visible; /* 悬停时文本不隐藏 */
text-overflow: inherit; /* 悬停时不使用省略号 */
white-space: normal; /* 悬停时文本换行 */
}接下来是HTML部分：
<div class="text-container">
这是一段很长的文本，需要超出部分隐藏，鼠标悬停时显示全部内容。
</div>将上述CSS添加到您的样式表中，并在您的HTML中使用text-container类的div元素，当文本超出容器宽度时，会以省略号显示，鼠标悬停时会显示全文。
评论已关闭