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

css

Solution

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.

Problem

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.

Original source