显示剪切的标题文字

Question

是否可以在悬停时完全显示剪切的（overflow: hidden）文字，以便它可读。像

这样的规则

div:hover {
  overflow: visible;
  background-color: yellow;
}

导致显示在另一个上面的文本，因此无法读取任何内容。

很难解释，但很容易看到：plunker。不能改变尺寸。工具提示肯定会奏效，但我觉得它很有侵入性。

一个附带问题：如何判断给定的div内容是否已完全显示或剪辑？

Answer 1

如果有可能你可以尝试改变你的风格

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid grey;
  width: 100px;
  height: 36px;
  position: relative;
}

div {
  width: 100px;
  height: 36px;
  overflow: hidden;
}

div:hover {
  overflow: visible;
  background-color: yellow;
  position: absolute;
  display:block;
  height: auto;
  top: 0;
  z-index: 2;
}