How can I avoid mid-link word wrap with CSS?

Question

I have a list of items displayed horizontally for my navigation area, but it's wrapping mid-link, like this

| This is Item One | This is Item Two | This is Item Three | This is
Item Four | This is Item Five | 

when I want it to wrap like this:

| This is Item One | This is Item Two | This is Item Three  
| This is Item Four | This is Item Five | 

I tried using the whitespace: nowrap declaration on my link items (li a), but that just makes the second (wrapped) line disappear entirely.

Answer 1

I believe what you are looking for is the white-space property:

.menu a {
    white-space: nowrap;
}

Another option would be to assign a fixed width and float each menu item to the left.

.menu a {
    display: block;
    float: left;
    width: 200px;
}

Of course, the CSS will vary depending on your HTML. I'd recommend putting you menu in an unordered list, and applying these styles to the list items.

Answer 2

Without having any of your styles and markup at my disposal, this is the best that I can offer for a solution (as it's a wild guess to what your problem is exactly):

All you need to do is apply display:inline-block to the appropriate <a> tags.