将鼠标悬停在带有额外空格的单元格中显示长文本答案

【问题标题】：Show long text in a cell with extra spaces when hovered over将鼠标悬停在带有额外空格的单元格中显示长文本
【发布时间】：2021-09-07 19:36:30
【问题描述】：

我找到了多个答案，但没有一个是专门针对“额外空格”解决的。

所以，我有一个包含多列和多行的表。当我在一个单元格中有长文本时，我有.tablecell: hover CSS 在悬停时进行更改：将其背景更改为白色以将其显示出来，并将position: relative 的上下文更改为右侧的单元格。当不悬停时，它在单元格内较小，末尾有三个点。

示例示例将是此线程的答案： Clip long text inside HTML table cells, show entire content on hover

这就是我想要的，但是当鼠标悬停时显示长文本时，我希望在文本末尾有额外的空格。或者我需要其他任何东西来与其他单元格有所不同，因为如果这个文本的结尾出现在另一个单元格的中间，它会变得有点混乱。

这是目前悬停前后的示例：

Before

After

这里，结尾的“文本”紧挨着“96”，这让人很难看到并且有点混乱。

我的解决方案： 我想出了一个简单的解决方案，但它也适用于所有其他单元格。我需要做的只是将 margin-right 添加到 HTML 元素中。例如：

<tr style="padding-right: 5px;">
  <td><div>Jane Doe</div></td>
  <td><div>Suspendisse lacinia, nunc sed luctus egestas, dolor enim vehicula augue.</div></td>
  <td><div>1-234-567890</div></td>
</tr>

这样，当我悬停在上面时，我就有了额外的空间，但是，它也影响了空单元格。所以，如果我将鼠标悬停在一个空单元格上，现在它也会显示空白的白色 7px 填充。

【问题讨论】：

标签： html css html-table position longtext

【解决方案1】：

我想出了一个简单的解决方案。我需要做的只是将 margin-right 添加到 HTML 元素中。例如：

<tr style="padding-right: 5px;">
  <td><div>Jane Doe</div></td>
  <td><div>Suspendisse lacinia, nunc sed luctus egestas, dolor enim vehicula augue.</div></td>
  <td><div>1-234-567890</div></td>
</tr>

这样，当我悬停在上面时，我就有了额外的空间。

【讨论】：