css实现div文本溢出显示省略号，鼠标悬浮时显示完整内容的tooltip
在CSS中，可以通过以下样式实现文本溢出显示省略号，并在鼠标悬浮时通过:hover伪类显示完整内容的tooltip：
.div-text {
width: 200px; /* 设置容器宽度 */
white-space: nowrap; /* 确保文本在一行内显示 */
overflow: hidden; /* 超出容器部分隐藏 */
text-overflow: ellipsis; /* 文本溢出显示省略号 */
cursor: default; /* 设置鼠标样式 */
}
.div-text:hover {
overflow: visible; /* 鼠标悬浮时显示全文 */
white-space: normal; /* 允许文本换行 */
text-overflow: clip; /* 移除省略号 */
}HTML部分：
<div class="div-text" title="这是一段很长的文本内容，需要显示省略号，鼠标悬浮时展示全文">
这是一段很长的文本内容，需要显示省略号，鼠标悬浮时展示全文
</div>在上述代码中，.div-text 类定义了基本的文本溢出样式，而 :hover 伪类在鼠标悬浮时移除了文本溢出的样式，使得内容可以完整显示。title 属性用于提供完整的文本信息，当鼠标悬浮在div上时，会显示这个工具提示。
评论已关闭