css隐藏div中超出部分文字，鼠标放上去则显示全部内容
您可以使用CSS的text-overflow属性结合:hover伪类来实现这个效果。以下是一个简单的示例：
HTML:
<div class="text-container">
这里是一些超出容器部分的文本内容，鼠标悬停时会显示完整内容。
</div>CSS:
.text-container {
width: 200px; /* 定义容器宽度 */
white-space: nowrap; /* 确保文本不换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
text-align: center; /* 文本居中对齐 */
transition: width 0.5s; /* 动画过渡效果 */
}
.text-container:hover {
width: auto; /* 鼠标悬停时，容器宽度自适应内容 */
overflow: visible; /* 内容可见 */
white-space: normal; /* 文本正常换行 */
text-overflow: none; /* 省略号不显示 */
}这段代码会使得.text-container中的文本在超出容器宽度时显示为省略号，鼠标悬停时会显示全部文本内容。
评论已关闭