Google chrome: 如何在鼠标悬停在 table 单元格上时显示全文

Question

预期行为

我的网页上有一个 table。在一些 table 单元格中，它有长文本，我将这些 css 设置为 td 标签。当文本长于 table 单元格的宽度时，它将被隐藏。

td {
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

当鼠标悬停在这些 table 个单元格上时，我希望显示全文。

当前行为

对于safari，当鼠标悬停在文本较长的table单元格上时，会出现全文。

对于googlechrome，鼠标悬停在上面没有反应。问题

如何google chrome可以像safari一样显示全文？欢迎任何建议或想法。

Answer 1

您可以使用标题属性：https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title

<p>Newlines in title should be taken into account, like this <abbr title="This is a
multiline title">example</abbr>.</p>

Answer 2

我认为在你的情况下，最好将 "title" 属性放在你的 <td> 中。 More about Title Attributes

例如：

<td title='Full Text about School 1'>School 1 Data</td>
<td title='Full Text about School 2'>School 2 Data</td>
...
<td title='Full Text about School X'>School X Data</td>

Google chrome: 如何在鼠标悬停在 table 单元格上时显示全文

Google chrome: how to display full text when the mouse hovers over a table cell

css

google-chrome

html-table

overflow