js 文字超出部分用省略号替代 鼠标悬停时显示全部内容

JS文本超出部分用省略号替代的需求经常在网页设计中出现。这样做可以有效地减少页面上冗长的文本显示，并给用户一个快速浏览的体验。一种常见的解决方案是使用CSS的文本溢出属性，结合JavaScript的悬停事件来实现。

首先，在CSS中定义文本溢出样式。使用`text-overflow:ellipsis;`属性可以让超出部分的文本显示省略号，同时，设置`white-space: nowrap;`属性可以防止文本换行。

接下来，在HTML中声明需要添加省略号的文本元素，并添加一个自定义的class名称，例如`ellipsis-text`。

然后，在JavaScript中编写相关的处理逻辑。首先，获取所有带有class名称为`ellipsis-text`的元素。然后，对每个元素绑定悬停事件，当鼠标悬停在文本上时，将元素的`title`属性设置为元素的全部文本内容，以显示完整的文本。当鼠标离开时，将`title`属性重置为空，以显示省略号。

下面是一个简单的实现示例：

HTML部分：

<div class="ellipsis-text">这是一个超出部分用省略号替代的示例文本。</div>

CSS部分：

.ellipsis-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

JavaScript部分：

var elements = document.getElementsByClassName('ellipsis-text');
Array.prototype.forEach.call(elements, function(element) {
  element.addEventListener('mouseover', function() {
    element.title = element.innerText;
  });
  element.addEventListener('mouseout', function() {
    element.title = '';
  });
});

通过以上步骤，当鼠标悬停在文本上时，会显示全部的文本内容；鼠标离开时，文本又会被替换为省略号，从而实现了需求的功能。