如何为HTML表格悬停展示的长文本末尾添加额外间距避免内容混淆

核心思路 #

把内边距的触发限制在悬停状态，同时排除空单元格，避免无内容时出现多余空白块。

可直接使用的实现方案 #

方案1：CSS伪类实现（无侵入，无需修改HTML） #

利用:hover和:not(:empty)伪类组合，仅给有内容的悬停单元格添加右间距：

/* 原有单元格基础样式保留 */
.tablecell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}
/* 原有悬停样式保留，新增右内边距规则 */
.tablecell:hover {
  z-index: 1;
  background: #fff;
  overflow: visible;
  white-space: nowrap;
  /* 仅对非空单元格生效的右间距 */
  padding-right: 8px;
}
/* 空单元格悬停时取消内边距，避免空白块 */
.tablecell:empty:hover {
  padding-right: 0;
}

如果你的文本是包裹在单元格内部的<div>里，调整选择器即可：

.tablecell:hover div:not(:empty) {
  padding-right: 8px;
  background: inherit;
}

方案2：伪元素占位（兼容老浏览器，同时强化分隔效果） #

如果担心:empty伪类的兼容性，还可以用伪元素在文本末尾添加同背景的占位块，天然和右侧内容隔开：

.tablecell:hover div::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 100%;
  vertical-align: top;
  background-color: inherit;
}
/* 空内容时隐藏伪元素 */
.tablecell div:empty::after {
  display: none;
}

方案3：阴影分层（无需加间距也能区分） #

如果不想改动文本区域宽度，可以给悬停单元格加右侧阴影，用视觉层级区分相邻内容：

.tablecell:hover {
  box-shadow: 2px 0 4px rgba(0,0,0,0.15);
}

原方案问题说明 #

你之前直接给<tr>添加默认的padding-right，是全局作用在所有行所有单元格上，不管是否悬停、是否有内容都会生效，所以会出现空单元格悬停显示空白块的问题。调整为悬停时才加载间距、且排除空元素后，即可完全匹配需求。

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