Strange problem with registration and spaces: nowrap in Chrome and IE

Question

I ran into a really weird problem. ( http://jsfiddle.net/Fq68D/ )

HTML

<div> <p>Hello World!</p> </div> 

CSS

 div { display:inline-block; } p { background-color:#ccc; padding:10%; white-space:nowrap; } 

In Firefox, it works as expected, the text fits in p and has an addition,

While in Chrome and IE, the text goes out of the box.

What causes this? Any workarounds?

Answer 1

Add a display: inline-block; element display: inline-block; in p :

http://jsfiddle.net/Fq68D/1/