文本超长使用css将多出的部分转化成...hover展示全部内容
要实现文本超长时，超出部分显示为省略号（...），并且在鼠标悬停时显示完整内容，可以使用CSS的text-overflow属性结合white-space和overflow属性。以下是实现这个效果的CSS代码示例：
.ellipsis {
white-space: nowrap; /* 确保文本在一行内显示 */
overflow: hidden; /* 超出容器部分隐藏 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
max-width: 100%; /* 设置最大宽度 */
}
.ellipsis:hover {
white-space: normal; /* 鼠标悬停时换行显示所有内容 */
overflow: visible; /* 不再隐藏文本 */
text-overflow: clip; /* 移除省略号 */
}接下来是HTML部分：
<div class="ellipsis">
这是一段很长的文本，需要在超出容器宽度时显示为省略号，并且鼠标悬停时展示全部内容。
</div>将上述CSS类应用到你的HTML元素上，即可实现文本超长时的省略号效果。
评论已关闭