css - 如何在不干扰 float 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”用 wrapper 调整大小
• “姓名”没有换到第二行(它有溢出:隐藏)
• 所有跨度都不应具有定义的宽度
• 编辑/删除向右浮动，名称向左浮动
• 跨度在标记中不必按该顺序排列，但应该出现在页面上

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

到目前为止，我提出的解决方案是将“编辑”和“删除”移到第二行，或者使“名称”文本在被迫换行时完全消失。任何人都知道这是否有可能实现？感谢阅读!

Answer 1

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

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

或者，您可以颠倒标题和控件的顺序，并 float 控件:

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

无论哪种方式，应用于 #name 的 white-space: nowrap 似乎都解决了不需要的包装问题。

我只在 Chrome 16 中测试过，但理论上，white-space: nowrap is supported in most browsers .