Question

I have a header/title bar that isn’t resizing the way I want it to. It contains a page title (which could be anything, of any length) and I don’t want the text to wrap. So let’s say I have a title bar for a page called “Approve a Room Request”:

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

• Only “name” resizes with wrapper
• “Name” doesn’t wrap to a second row (it has overflow: hidden)
• None of the spans should have a defined width
• Edit/Delete float right, Name floats left
• The spans don’t have to be in that order in markup, but should appear that way on the page

Below: The first image is ideal. The second image shows that “edit” and “delete” don’t have a fixed width. The third image shows that if the container is resized too small, “name”‘s overflow gets thrown out (and doesn’t wrap).

So far, the solutions I’ve come up with have bumped “edit” and “delete” to a second line, or made the “name” text disappear entirely when it was forced to wrap. Anyone know if this is possible to pull off? Thanks for reading!

Answer 1

I think you’ll have to wrap the Edit/Delete/etc. controls in their own element, and absolutely position that:

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

Alternatively, you can reverse the order of the title and controls, and float the controls:

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

Either way, white-space: nowrap applied to #name seems to sort out the undesired wrapping.

I’ve only tested this in Chrome 16, but in theory, white-space: nowrap is supported in most browsers.