css - ホバー時に位置を「絶対」に変更します（完全な文言を表示するため）

Answer 1

リンクで許可される最大文字数をサーバーで判断できる場合は、次の戦略を使用できます。

CSS:

.table div {
    float:left;
    margin-right:5px;
    width:150px;
    white-space:nowrap;
    overflow:hidden
} 
a.trick span.extendedText,
a.trick:link span.extendedText,
a.trick:active span.extendedText,
a.trick:visited span.extendedText {
    display:none;
}
a.trick:hover span.extendedText{
    display:block;
}

HTML:

<div class=table>
    <div>Text here</div>
    <div><a class=trick href="#">Text here may <span class="extendedText">be too long to fit</span></a></div>
    <div>Next column</div>
    <div>of my table made of divs</div>
</div>

Answer 2

なぜ絶対位置を取得したいのか、それが単語のサイズとどう関係しているのかなど..

わかりました、あなたの例がここで働いているのを見ましたhttp://jsfiddle.net/R6dkJ/ Firefoxで。

この正確なことを「正しく」行うには、例として次のようにします。

a.trick:hover{white-space:nowrap;}

これにより、同じ効果が得られます。

absoluteプロパティは、要素自体の配置に使用されます。もちろん、このようなハッキングに使用して目的の効果を得ることができますが、そうすると、ブラウザ間の非互換性に遭遇することは間違いありません.

Answer 3

少しのjQueryで解決しました。これは次のとおりです。

$('.trick').mouseover(function(){$(this).css('position','absolute');});
$('.trick').mouseout(function(){$(this).css('position','relative');});

何らかの理由で、Chrome/Safari は、位置が実際に絶対になるべきであるという追加の確認を求めています :)。どこでも動作するようになりました (IE を含む)。

参加していただきありがとうございます。この素敵な「ハック」をお楽しみください :)。