Geek Answers Handbook

How to wrap a lot of <span> inside a <div>

I have a hardcoded <div> . Inside the <div> are several hundred <span> tags. Can I wrap the gaps so that the line spacing is correct and the wrap between the gaps? I use word-wrap: break-word and it looks messy.

Here is the 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: on each line there should be several intervals, and the packaging should be between the intervals.

+8
css word-wrap
source share
6 answers

EDIT (2017): Flexbox with wrapper display: flex; flex-wrap: wrap display: flex; flex-wrap: wrap compatible with IE10 + (and Android 4.4+) and will allow universal alignment horizontally (aligns, aligns left or right, space-around , centers) and vertically ( align-items ), as well as universal line spacing ( align-content ... if height is specified at all).
Bonus: there are no ~ 4px spaces between elements that need to be taken care of, as with inline-block . You do pretty much what you want: no gutters, flex: 1 1 auto or padding: 1rem for example
Cheatsheet for Flexbox CSS Tricks
/ EDIT

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

If I understand your problem well, do you want so many times for a line that would correspond, but not start from line to line and end on another line?
Then the following script: http://jsfiddle.net/MRR6P/ will do the trick. Try

 span { line-height: 1.8; word-wrap: normal; display: inline-block; }
+19
source share

not 100% sure what you mean, but if you want each interval to be displayed on a different line, then make it the displayed block

 span { display: block; }

change

may be

 white-space:nowrap;

like this? http://jsfiddle.net/xNndp/1/ , except that there is no width on the div

+1
source share

So, if you want all of these spaces to take one line for yourself (this is what I understand), you should use <p> or <li> rather than spaces. Then you can use linear height to control the space between the lines.

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

Another method would be to place your display:block intervals, causing them to skip a line when they end.

0
source share

Try using display: block; inside css. Then adjust the margin / indentation for the desired interval.

0
source share

Are you trying to make a span action like a div?

If so, you can use the following:

 display: block;

Example:

http://jsfiddle.net/xNndp/

0
source share

The fastest way, though not ideal, is to use span { white-space: nowrap } . Of course, if the width of the <span> exceeds the width of the <div> , you will have problems. You need to either scroll through the <div> or use JavaScript to fix this scenario.

Other display with white-space options in the CSS spec are not cross-browser enough to work the way you want.

0
source share

More articles:


All Articles