javascript - divホバーに切り捨てられたテキストを表示する

Question

これは基本的な質問です。テキストが含まれているdivがあります。そのテキストが長い場合、オーバーフローを非表示に設定したため、テキストが切り捨てられます。そのdivにカーソルを合わせると、その完全なテキストが表示されます。画像の場合はaltタグを設定できますが、divの場合はどうすればよいですか？

Answer 1

ホバー時にオーバーフローを表示に設定して、テキストが表示されるようにすることができます。

CSS：

#your_div_id:hover{
    overflow: visible;
}

Answer 2

jQueryを使用すると、次のことができます。

HTML

<div> Heeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeey</div>

CSS

div{
  width: 30px;
  overflow: hidden;
}

JS

$('div').mouseover(function(){
  $(this).css("overflow", "visible");
});

$('div').mouseout(function(){
    $(this).css("overflow", "hidden");
});

フィドル