How to wrap div containing spans containing the text to be wrapped?

Question

Given this markup

<div>
    <span>foo</span>
    <span>bar</span>
    <span>some really long text with word breaks</span>
    <span>baz</span>
</div>

This displays as

foo bar some really long text with word breaks baz

I want it to display as

foo bar some really 
long text with word 
breaks baz

Using the answers to these other questions:

I am able to accomplish this if the <div> contains text directly in it. But once the text is split up into <span>s inside the ` these techniques no longer work.

Given that I cannot do away with the <span>s, how can I go about doing this?

EDIT:

Chrome web inspector lists the <div>'s current CSS as:

color: rgb(0, 105, 173);
display: block;
font-family: Arial, sans-serif;
font-size: 25px;
font-weight: bold;
height: 93px;
margin-bottom: 0px;
margin-left: 208px;
margin-right: 208px;
margin-top: 0px;
text-align: center;
text-shadow: rgb(255, 255, 255) 0px 0px 3px;
width: 300px;

I don't quite see what the problem is: http://jsfiddle.net/audetwebdesign/57cdP/ Is the `div` going to be absolutely positioned? — Marc Audet, Aug 07 '13 at 02:59
@MarcAudet : I have added width, to no avail. I have listed the current CSS above — bguiz, Aug 07 '13 at 04:00

score 0 · Answer 1 · answered Aug 07 '13 at 03:39

0

You should define the width of your div

div{width: 120px;}

demo

answered Aug 07 '13 at 03:39

Bhojendra Rauniyar

83,432
35
168
231

C-Link : I have added width, to no avail. I have listed the current CSS above – bguiz Aug 07 '13 at 03:59

Yudha Setiawan · Accepted Answer · 2013-08-07T04:09:00.383

0

The first thing you must set the width of that's element.

div{
    width: 250px;
    word-wrap: break-word; /*if you want to allow unbreakable words to be broken*/
    display: inline-block; /*The element is placed as an inline element, but it behaves as a block element*/
}

Live demo - JSFiddle

edited Aug 07 '13 at 04:09

answered Aug 07 '13 at 04:03

Yudha Setiawan

376
3
5

`display: inline-block` did it for me! not exactly sure why, but CSS has its myterious ways! – bguiz Aug 07 '13 at 06:07
what's the problem? are you want demo for it? – Yudha Setiawan Aug 07 '13 at 06:30
@ yudha no problem, have given you a check mark since this works. – bguiz Aug 07 '13 at 07:20

score 0 · Answer 3 · answered Aug 07 '13 at 05:29

0

Just try this...

div
{

    text-align:justify;
    width:130px;

}

Demo

answered Aug 07 '13 at 05:29

Guruprasad J Rao

29,410
14
101
200

How to wrap div containing spans containing the text to be wrapped?

3 Answers3