如何在不干扰浮动DIV的情况下使包装文本消失？

Question

我有一个标题/标题栏，没有按照我想要的方式调整大小。它包含一个页面标题（可以是任何长度的任何东西），我不希望文本包装。因此，假设我有一个名为“批准房间请求”的页面的标题栏：

<div id="wrapper">
  <span id="name">Approve a Room Request</span>
  <span id="edit">Edit</span> 
  <span id="delete">Delete</span>
</div>

• 只有“名称”使用包装器调整大小
• “名称”不会换行到第二行（它有溢出：隐藏）
• 没有任何跨度应具有定义的宽度
• 右侧编辑/删除，名称左侧浮动
• 跨度不一定是标记中的顺序，但在页面上出现

下图：第一张图片非常理想。第二个图像显示“编辑”和“删除”没有固定的宽度。第三个图像显示，如果容器调整得太小，“name”的溢出会被抛出（并且不会换行）。

到目前为止，我提出的解决方案已经将“编辑”和“删除”碰到了第二行，或者使“名称”文本在被强制换行时完全消失。有人知道这是否有可能实现？谢谢你的阅读！

Answer 1

我认为你必须包装编辑/删除/等。控制在他们自己的元素中，绝对定位：

• http://jsfiddle.net/5bYjK/

或者，您可以反转标题和控件的顺序，并浮动控件：

• http://jsfiddle.net/5bYjK/3/

无论哪种方式，应用于white-space: nowrap的{​​{1}}似乎都会排除不受欢迎的包装。

我只在Chrome 16中对此进行了测试，但理论上是white-space: nowrap is supported in most browsers。