React表格hover弹出层长文本单行溢出重叠其他列如何解决

算力阿峰

2026-10-6

问题根因

你代码中的white-space: wrap是无效CSS属性值，浏览器无法识别该配置会回退到默认的white-space: nowrap，导致弹出框文本强制单行展示；同时缺少长文本强制断行配置，连续无空格的超长字符也会出现横向溢出问题。

修复方案

直接替换你的[data-title]相关CSS样式为以下内容即可：

[data-title] {
  font-size: 14px;
  position: relative;
  cursor: help;
}

[data-title]:hover::before {
  content: attr(data-title);
  opacity: 1;
  position: absolute;
  /* 固定从当前单元格左下角开始弹出，避免横向错位 */
  left: 0;
  top: 100%;
  padding: 10px;
  background: #000;
  color: #fff;
  font-size: 14px;
  /* 改为最大宽度限制，短文本自动适配宽度，长文本最多不超过300px */
  max-width: 300px;
  /* 修复无效属性值，normal支持自动换行，需保留原文本换行/空格可替换为pre-wrap */
  white-space: normal;
  /* 强制断行，无空格的超长字符串也能正常换行 */
  word-break: break-all;
  z-index: 9;
}

[data-title]:hover::after {
  content: '';
  position: absolute;
  opacity: 1;
  bottom: -12px;
  left: 8px;
  border: 8px solid transparent;    
  border-bottom: 8px solid #000;
}