Question

想象一下，我有以下代码（当然简化了我的真实背景）：

<div id="box" style="width: 120px;" onmouseover="this.style.width='200px'" onmouseout="this.style.width='120px'">
    <div>A label</div>
    <div>Another label</div>
    <div>Another label, but a longer label</div>
</div>

我想要实现的目标如下：

我的div框有一个固定的宽度（默认为120px）。在此配置中，嵌套在框中的每个标签必须写在一行中。如果文本太长，则必须隐藏溢出。

在我的示例中，第三个项目将显示为Another label, but a或Another label, but a ...。

当光标进入div框时，框的宽度会被修改（例如200px）。在此配置中，第一个配置中缩短的标签现在显示在整个空间中。

使用我的代码段，当框中有120px时，第三个标签会以两行显示，我不希望这样......

我怎样才能做到这一点？

请注意，如果解决方案也适用于IE6，我会很棒！

即使我更喜欢纯CSS / HTML解决方案，也允许（简单）Javascript（和jQuery）！

Answer 1

尝试在div上将以下内容作为类：

white-space:nowrap;

我这里没有IE6，所以我不能这样。

Answer 2

style =“white-space：nowrap; overflow：hidden;”

如何更改嵌套在div中的显示文本的宽度？

2 个答案: