css - 通常は切り捨てられたテキストを表示しますが、ホバーすると全文を表示します

Question

私はその中に段落かそこらのテキストを含むdivを持っています。最初のいくつかの単語を通常どおりに表示したいのですが、ホバーすると全文が表示されるように展開します。理想的には、CSSのみを使用し、データの重複を排除したいと考えています。

これは私が試したものです：http：//jsfiddle.net/SEgun/

テキストが展開されたときにdivを移動したくないのですが、div 2が展開されて、div 3をカバーする全文が表示されるだけです。これは可能ですか？PS私は遅延ブラウザを気にしません。

Answer 1

以下のCSSにより、divはその下のすべてを「カバー」するため、コンテンツがプッシュダウンされることはありません。

position: absolute;
background-color:#FFF;

以下のものが見えないように、背景色は重要です。

すべてが同じ場所にあることを確認するために、次の要素に線の高さと同じ値の上部マージンを与えることができます。+記号は隣接する兄弟セレクターです。

div {
    line-height: 20px;
}
#data:hover+div {
    margin-top:20px;
}

デモ

Answer 2

これはどうですか：http：//jsfiddle.net/KGqnj/