Question

我有一张桌子，我希望在悬停时显示完整的细胞内容。

我使用了css，但现在我面临除Chrome之外的所有浏览器的错误。

HTML提取：

<table><tr>
  <td class="hover-text" style="width: 99px">
    <div style="width: 99px">A long text</div>
  </td>
</tr></table>

CSS提取：

.hover-text div{
  text-overflow: ellipsis;
}
.hover-text:hover div{
  overflow: visible;
  z-index: 1;
  width: auto !important;
  position: absolute;
}

这一切都很好，除非我使用任何浏览器而不是Chrome ，只有一行并且有一个水平滚动条。然后细胞奇怪地调整大小。没有这种条件之一，我没有遇到任何问题。不幸的是HTML是从我使用的框架中给出的。

我尝试了各种各样的东西，但此时我不知所措......

如果您调整表格的大小，以便没有水平滚动条，一切都按预期工作，您可以看到此问题here。

Answer 1

您的td元素有一个“hover-text”类，而您的CSS使用选择器.text-hover。这意味着您提供的CSS不会影响您提供的HTML。

要解决此问题，请将td元素的类更改为“text-hover”或将CSS选择器更改为.hover-text。

Answer 2

请注意您在html标记中保留的名称，并在css中使用。即使是专业人士也可能会这样混淆。

.hover-text div{
    text-overflow: ellipsis;
}
.hover-text:hover div{
    overflow: visible;
    z-index: 1;
    width: auto !important;
    position: absolute;
}

Answer 3

我已经调整了你的CSS，现在它对我来说很好。

<强> Working Demo

<强> CSS

.hover-text div{
  text-overflow: ellipsis;
    overflow:hidden;
    white-space:nowrap;
    width:100%;
}
.hover-text:hover div{
  overflow: visible;
  z-index: 1;
  width: auto !important;
  position: absolute;
}

Answer 4

找到解决方案：http://jsfiddle.net/FmY5R/10/

td{
   display: inline-block
}

但我仍然不确定导致这个错误的原因..

更改-width </div>中<div>的宽度变化

4 个答案: