css - 强制正确的最大宽度

Question

我有以下情况:

<div style="max-width:300px;overflow-y:auto;overflow-x:scroll">
    <a href="#" style="display:block">sometext 1</a>
    ...
    <a ...>...</a>
</div>

这是一个简化版本，我知道阅读长代码是多么无聊 :) 现在我需要让 div 正确使用 tne max-width 属性。我不需要跨浏览器解决方案 - 只有最新的浏览器才能支持它。

问题:

如果 A 元素的内容中有空格 - 它将紧跟在空格之后。所以在这种情况下，“sometext”将在一行中，而“1”在另一行中:并且在 300px 之前不应该换行；

如果我将“max-width:300px”添加到 A 元素 - “1”不会被换行，但随后填充将被忽略，并且数字“1”在通过 Firebug 查看时仍然看起来越界.

我不知道我是否能够正确解释这一点，但我希望我做到了。

如果您不明白问题:

我需要制作一个具有上述结构的“弹出菜单”元素，以便它可以自动扩展，但只能扩展到 300x200 像素。达到限制。

谢谢你的意见

更新

Opera 似乎可以很好地完成这项任务，但 Firefox 却不行。这是一个例子:

http://jsfiddle.net/QGYwD/

Answer 1

如果您不希望任何 a 中的文本换行，请为它们指定 white-space:nowrap 样式。

http://jsfiddle.net/QGYwD/1/