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属性用于定位元素本身。当然，您可以将它用于这样的 hack 以获得一些想要的效果 - 但是当您这样做时，您肯定会遇到浏览器之间的不兼容问题。

Answer 3

用一点 jQuery 解决，即：

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

出于某种原因，Chrome/Safari 希望进一步确认该位置实际上应该成为绝对的:)。现在可以在任何地方使用（包括 IE）。

感谢您的参与，并享受这个不错的“黑客”:)。