css ,js实现一个简单的文本溢出效果功能

实现一个简单的文本溢出效果可以通过 CSS 和 JavaScript 结合来完成。以下是一个示例，演示如何实现当文本超出容器范围时显示省略号（"..."），并且当鼠标悬停在文本上时显示完整文本。

CSS 实现文本溢出省略号

首先，使用 CSS 来实现基本的文本溢出效果：

.ellipsis {
    width: 250px; /* 容器宽度 */
    white-space: nowrap; /* 禁止文本换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
}

HTML 结构

定义 HTML 结构，应用上述 CSS 类：

<div class="ellipsis" id="textContainer">
    这是一段很长很长的文本，用于演示文本溢出省略号的效果。当文本超出容器宽度时，会显示省略号。
</div>

JavaScript 实现鼠标悬停显示完整文本

然后，使用 JavaScript 来处理鼠标悬停事件，显示完整文本：

document.getElementById('textContainer').addEventListener('mouseover', function() {
    this.style.whiteSpace = 'normal';
    this.style.overflow = 'visible';
    this.style.textOverflow = 'clip';
});

document.getElementById('textContainer').addEventListener('mouseout', function() {
    this.style.whiteSpace = 'nowrap';
    this.style.overflow = 'hidden';
    this.style.textOverflow = 'ellipsis';
});

在这段代码中，当鼠标悬停在文本上时，文本的 white-space、overflow 和 text-overflow 属性被修改，以显示完整文本。当鼠标移出时，这些属性被重置以再次显示省略号。

总结

这个示例展示了如何通过 CSS 创建一个简单的文本溢出效果，并通过 JavaScript 控制鼠标悬停时显示完整文本。这种方法适用于需要简单文本溢出处理的场景。如果文本内容非常长，可能还需要考虑其他的 UI 方案，比如弹出框或者展开/折叠效果。