html - 显示剪切的标题文本

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;
}