クリップされたヘッダーテキストを表示

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