Question

I have divs after each other that look like this.

<div class="tag">one tag</div>
<div class="tag">second tag</div>
<div class="tag">third tag</div>
...50 more of them....


(in CSS)

.tag {
    display:inline
}

I found out that I have too many of them and they start breaking in the middle, and I don’t want that.

However, when I set the nowrap like this

.tag {
    display:inline;
    white-space:nowrap;
}

all of them are on one line, making more than 100% of the window. I don’t want that.

What I want: if there are too many of these divs on one line, the list of the divs can break, but the divs themselves don’t. I just don’t want to break the divs in the middle.

I hope I tell it clearly enough.

Answer 1

If I understand right, you want them to lay side to side, and then break to a new line when the row is full, but not in the middle of a div.

All you need is

.tag {
    float: left;
}

See fiddle here for demo.

You can also add padding-left: 5px; if you want some space between them.