CODEWITHSUNDEEP
htmlcssword-wrap
Andreyu
Andreyu

Reputation: 454

Weird text wrapping differences between browsers

Trying to debug a bigger problem I managed to reduce it to this simple situation:

Here it is in jsFiddle: http://jsfiddle.net/uUGp6/

Here's the HTML:

<div class="box">
    <img class="pic" src="http://i3.minus.com/jbuwgurDfNniFM.png"/>
    Test 1
    this is a test: testa testb testc testd teste
</div>

<div class="divider"/></div>

<div class="box">
    <img class="pic" src="http://i3.minus.com/jbuwgurDfNniFM.png"/>
    Test 2<br/>
    this is a test testa testb testc testd teste
</div>

And the CSS:

.box {
    background-color: beige;
    float: left;
    margin-right: 10px;
    height: 100px;
}

.pic {
    float: left;
}

.divider {
    clear:both;
    height:10px;
    width:500px;
    background:blue;
}

In Firefox,Chrome and Safari the text in the second box is wrapped. A new line starts after "testc" However in Opera, IE9, IE8 there is no wrapping.

The only difference between the two boxes is the br tag in the second one.

I don't understand why in the second box the line gets wrapped but in the first box a much bigger line is not wrapped. And what does the br tag have to do with it? Does anyone know what I can do to force the browsers to display it in the same way?

Also, which browsers get it right?

P.S.

The floats are essential (like i said, this is a simplification of a bigger problem).

I should add that I'm testing this on Windows 7

Edit: it wraps in Safari as well

Upvotes: 0

Views: 365

Answers (2)

Arbel
Arbel

Reputation: 30989

If you wrap the content that is pulled from the DB after the floated img element in an inline-block div (or span if you can't use div) the problem will be solved. Even if you have <br> or <h1>... tags in the pulled content from the DB.

So your sample code will look like this:

<div class="box">
 <img class="pic" src="http://i3.minus.com/jbuwgurDfNniFM.png"/>
 <div class="DBContentWrapper">
  Test 1
  this is a test: testa testb testc testd teste
 </div>
</div>

<div class="divider"/></div>

<div class="box">
 <img class="pic" src="http://i3.minus.com/jbuwgurDfNniFM.png"/>
 <div class="DBContentWrapper">
   Test 2<br/>
   this is a test testa testb testc testd teste
 </div>
</div>

/\

.box {
    background-color: beige;
    float: left;
    margin-right: 10px;
    height: 100px;
}

.DBContentWrapper {
    display: inline-block;
}

.pic {
    float: left;
}

.divider {
    clear:both;
    height:10px;
    width:500px;
    background:blue;
}

Upvotes: 1

darwin
darwin

Reputation: 240

if you define the white-space attribute to e.g. pre-wrap, you will have the same wrapping in all browsers and you can drop the <br /> tag...

.box { white-space: pre-wrap; }

Upvotes: 0

Related Questions