html超过8位以...显示鼠标移到上方显示

在HTML中，可以使用CSS的text-overflow属性来控制文字溢出的显示方式。当文字的长度超过指定的宽度时，可以使用"..."来代替溢出部分的文字，并让鼠标悬停在文字上方时显示完整的内容。

首先，我们可以为要显示的文字所在的元素添加一个容器，并设置其宽度。

<div class="text-container">
  需要显示的文字内容
</div>

接下来，在CSS中，我们为容器元素添加样式，并设置text-overflow和white-space属性。

.text-container {
  width: 200px; /* 设置容器的宽度 */
  overflow: hidden; /* 隐藏溢出部分的内容 */
  text-overflow: ellipsis; /* 使用"..."来代替溢出部分的文字 */
  white-space: nowrap; /* 不允许文字换行 */
}

这样设置之后，当文字的长度超过容器的宽度时，就会显示为"..."。但鼠标悬停在文字上方时，我们还需要通过JavaScript来显示完整的内容。

var container = document.querySelector(".text-container");

container.addEventListener("mouseenter", function() {
  container.title = container.textContent; // 在鼠标悬停时显示完整的内容
});

container.addEventListener("mouseleave", function() {
  container.title = ""; // 鼠标离开时隐藏提示框
});

通过上述的设置，当文字超过容器的宽度时，将会显示为"..."。当鼠标悬停在文字上方时，将会显示完整的内容。