CODEWITHSUNDEEP
cssword-wrap
user191688
user191688

Reputation: 2659

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.

Upvotes: 10

Views: 21581

Answers (7)

Winter&#39;s Love
Winter&#39;s Love

Reputation: 1

I have a simple solution. You just need to add a blank to the end of the content in each span or to add a blank between every two spans. It works very well and the print will be pretty!

Upvotes: 0

FelipeAls
FelipeAls

Reputation: 22171

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;
}

Upvotes: 27

Huangism
Huangism

Reputation: 16438

not 100% sure what you mean but if you want each span to display on a different line, then make them display block

span { display: block; }

edit

maybe

white-space:nowrap;

like this? http://jsfiddle.net/xNndp/1/ except with no width on the div of course

Upvotes: 1

Jon Adams
Jon Adams

Reputation: 25137

The quickest way, though not perfect, is to use span { white-space: nowrap }. Of course, if the <span> width extends beyond the <div> width you're going to have problems. You'll either need to make the <div> scrollable, or use JavaScript to fix this scenario.

The other display with white-space options in the CSS spec aren't cross-browser enough to work the way you want them to.

Upvotes: 0

Josh Foskett
Josh Foskett

Reputation: 4121

Are you trying to make the span act like a div?

If so, you could use the following:

display: block;

Example:

http://jsfiddle.net/xNndp/

Upvotes: 0

Jordan Parker
Jordan Parker

Reputation: 249

Try using display:block; within the 's css. Then adjust the margin/padding for the required spacing.

Upvotes: 0

Fredy31
Fredy31

Reputation: 2817

So if you would like all those spans to take one line for themselves (thats what I understand), you should use <p>s or <li>s and not spans. Then, you could use line-height to control the space between lines.

Hell, you could even use <br>s to break your lines.

Another method would be to put your spans display:block, making them skip a line when they end.

Upvotes: 0

Related Questions