css - 谷歌浏览器 : how to display full text when the mouse hovers over a table cell

Question

预期行为

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

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

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

当前行为

对于safari，当鼠标悬停在文本较长的表格单元格上时，会显示全文。

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

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

Answer 1

我认为在你的情况下，最好将“标题”属性放在你的 <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>