鼠标悬停时显示表格单元格内DIV隐藏文本的需求与代码求助

嘿，我来帮你解决表格单元格悬停显示完整文本的问题！

从你描述的问题来看，核心是要让原本被截断隐藏的文本，在鼠标悬停时能在整个单元格范围内完整展示，而不是只在原来的小区域里显示。结合你给出的代码片段，我给你一套简单的CSS+JS调整方案：

第一步：调整JS代码，给元素添加类名 #

首先，在你生成内部div的时候，给它加上一个统一的类名，同时给表格单元格（也就是jobSource元素，假设它是<td>）也加个类，方便后续用CSS控制：

var jobSourceID = 'jobSource' + jobIndex;
// 给内部div添加类名job-source-text
jobSource.innerHTML = '<div id="' + jobSourceID + '" class="job-source-text">' + jobSourceValue + '</div>';
// 给表格单元格添加类名job-source-cell
jobSource.classList.add('job-source-cell');

第二步：添加CSS样式实现悬停效果 #

接下来用CSS控制默认状态和悬停状态的显示逻辑：

/* 表格单元格基础样式：作为文本容器的定位基准 */
td.job-source-cell {
  position: relative;
  overflow: hidden;
  /* 可选：设置固定高度，避免单元格高度突变 */
  min-height: 2em;
  line-height: 2em;
  padding: 0.5em; /* 给文本留点内边距 */
}

/* 默认状态：文本单行截断，显示省略号 */
.job-source-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 悬停状态：文本在整个单元格范围内完整显示 */
td.job-source-cell:hover .job-source-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  white-space: normal; /* 允许换行，填满单元格 */
  line-height: 1.4em;
  background-color: #ffffff; /* 和单元格背景一致，防止覆盖其他内容 */
  padding: 0.5em; /* 和单元格内边距保持一致 */
  z-index: 10; /* 确保文本在最上层 */
}

为什么这样做？ #

• 默认状态下，文本会单行显示，超出单元格的部分用省略号隐藏，保持表格布局整齐；
• 当鼠标悬停时，内部的文本容器会变成绝对定位，完全填满整个单元格，同时允许文本换行，这样完整内容就会在单元格的范围内展示，不会溢出到其他单元格；
• 背景色和内边距的设置是为了让悬停时的文本区域和原单元格视觉统一，避免突兀。

如果你的表格单元格有自定义背景色，记得把CSS里的background-color改成对应的颜色就行~

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