css文字超出隐藏变省略号鼠标上去展示完整

/* CSS代码 */
.ellipsis {
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示为省略号 */
  width: 200px; /* 设置一个固定宽度，可以根据需要调整 */
}

/* 鼠标悬停时显示完整内容 */
.ellipsis:hover {
  white-space: normal; /* 恢复正常换行 */
  overflow: visible; /* 显示所有内容 */
  text-overflow: clip; /* 取消省略号 */
  z-index: 10; /* 确保悬停时内容在其他元素之上 */
  background-color: #f9f9f9; /* 可选：设置背景颜色 */
}

<!-- HTML代码 -->
<div class="ellipsis">
  这是一段非常长的文字，当它超出容器的宽度时会被隐藏并显示为省略号。鼠标悬停时会显示完整内容。
</div>

解释说明：

1. .ellipsis 类：

   • white-space: nowrap;：防止文字换行，确保所有文字在一行内显示。
   • overflow: hidden;：超出容器宽度的部分会被隐藏。
   • text-overflow: ellipsis;：超出部分用省略号 (...) 表示。
   • width: 200px;：设置一个固定的宽度，确保有足够空间触发省略号效果。

2. :hover 伪类：

   • 当鼠标悬停在 .ellipsis 元素上时，white-space: normal; 恢复正常的换行行为。
   • overflow: visible; 和 text-overflow: clip; 使得所有内容都可见，不再被截断。
   • z-index: 10; 确保悬停时的内容不会被其他元素遮挡。
   • background-color: #f9f9f9; 是可选的样式，用于改善用户体验，突出显示悬停时的内容。