Google chrome：当鼠标悬停在表格单元格上时如何显示全文

Posted 2023-03-06

【中文标题】Google chrome：当鼠标悬停在表格单元格上时如何显示全文

【英文标题】：Google chrome: how to display full text when the mouse hovers over a table cell

【发布时间】：2018-12-06 18:11:59

【问题描述】：

预期行为

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

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

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

当前行为

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

对于谷歌浏览器，当鼠标悬停在它上面时没有反应。 问题

谷歌浏览器如何像safari一样显示全文？欢迎任何建议或想法。

【参考方案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>

【参考方案2】：

你可以使用title属性：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>