css省略記号、3ドットホバリングのイベント

Question

私はちょっと質問があります.Htmlの表のセルに長すぎるテキストがありますので、w3cのこの例のように省略記号に設定されたテキストオーバーフロープロパティを使用します。https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow と私は、たとえば、ポップアップは、テキストの最後にその3つの点でホバーの後に表示されるようにすることができますか？複雑なjsコードなしで可能ですか？あるいは、残りのテキストの代わりに3つのドットを表示し、それらに何かのホバー機能をつけるコードを自分で作っていなければなりませんか？

Answer 1

要素の属性titleを使用すると、余分なコードを書くことなく目的を達成できます。ちょうど次のスニペットを実行し、テキストを上に移動して結果を確認してください。

.ellipses { 
 
    white-space: nowrap; 
 
    width: 12em; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    border: 1px solid #000000; 
 
}

<div class="ellipses" title="This is some long text that will not fit in the box">This is some long text that will not fit in the box</div>