user191688 user191688 - 3 years ago 167
CSS Question

How to wrap many <span> within <div>

I have a

<div>
with hard-coded width. Inside the
<div>
are several hundred
<span>
tags. Can I wrap the spans so that line spacing is correct and wrapping is between spans? I use
word-wrap: break-word
and it looks a mess.

Here is pseudo code.

span {
margin: 2px;
border: 1px dotted #cccccc;
padding: 4px 10px 4px 10px;
}
div {
padding: 5px;
margin: 5px;
border: 1px solid #cccccc;
width: 800px;
word-wrap: break-word;
}

<div>
<span>stuff</span>
<span>more stuff</span>
<span>even more stuff</span>
.
.
.
</div>


Thanks!

EDIT for clarification: There should be multiple spans on each line, and wrapping should be between spans.

Answer Source

EDIT (2017): Flexbox with wrap display: flex; flex-wrap: wrap is compatible with IE10+ (and Android 4.4+) and will allow versatile alignments both horizontally (justified, aligned to the left or right, space-around, centered) and vertically (align-items) with also versatile spacing between lines (align-content… if an height is set, in general).
Bonus: no ~4px whitespace between items to take care of as with inline-block. You do pretty much what you want: no gutter, flex: 1 1 auto or padding: 1rem for example
Cheatsheet for Flexbox on CSS Tricks
/EDIT

Span doesn't seem very semantic, maybe use an unordered list?

If I understood well your problem, you want as many span per line that'll fit but no span begininng on a line and finishing in another line?
Then the following fiddle: http://jsfiddle.net/MRR6P/ will do the trick. Try

span {
  line-height: 1.8;
  word-wrap: normal;
  display: inline-block;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download