如何用CSS实现hover时显示被省略号截断文本的完整提示框

嘿，看你已经搞定了文本截断的基础样式，要实现hover时显示完整内容，这儿有几个实用的方案，按需选就行：

1. 最简单的原生方案：利用title属性 #

这是零成本的方法，直接给截断的<span>加个title属性，值就是完整文本。浏览器会自动在hover时弹出原生提示框，不用额外写CSS或JS：

<div class="overview">
  <span title="这里是你要展示的完整超长文本内容">这里是你要展示的完整超长文本内容</span>
  <em>其他内容</em>
</div>

优点：快得离谱，不用折腾；缺点：提示框样式是浏览器自带的，没法改样子。

2. 自定义样式方案：用CSS伪元素 #

如果想让提示框更贴合你的网站风格，用CSS伪元素就行。先给元素加个data-full-text存完整文本，再写hover样式：

修改后的HTML：

<div class="overview">
  <span data-full-text="这里是你要展示的完整超长文本内容">这里是你要展示的完整超长文本内容</span>
  <em>其他内容</em>
</div>

新增的CSS：

/* 给原有的span加个相对定位，方便伪元素定位 */
.overview span {
  text-overflow: ellipsis;
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  position: relative;
}

/* 自定义hover提示框 */
.overview span:hover::after {
  content: attr(data-full-text);
  position: absolute;
  bottom: 120%; /* 把提示框放在元素上方 */
  left: 0;
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: normal; /* 允许换行，避免提示框太宽 */
  max-width: 200px; /* 限制提示框最大宽度 */
  z-index: 999;
}

/* 可选：给提示框加个小三角，更美观 */
.overview span:hover::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 10px;
  border: 5px solid transparent;
  border-top-color: #333;
}

这个方案能完全自定义提示框的样式，比如背景色、字体、位置，体验比原生的好很多。

3. 复杂交互方案（可选）：JavaScript #

如果需要更复杂的逻辑（比如点击显示、动态加载文本），可以用JS来实现，但如果只是hover显示完整内容，前两种足够了。比如用JS创建一个提示框元素，hover时插入到页面，离开时移除——不过没必要的话，尽量不用，毕竟CSS方案更轻量。

选哪个看你的需求：要快就用title，要好看就用CSS伪元素！

内容的提问来源于stack exchange，提问作者magasr