问题
I have a container div that holds two items: a .button and a .box with text inside. .button comes first and is floated right. .box has no float [this is a constraint - I can't float it left due to similar other structures that depend on there being no float]. .box has overflow: hidden; to establish a new block formatting context. This allows .box to span "100% up to" the prior floated element, .button.
.outer-container houses all of these and is floated right.
http://jsfiddle.net/6qAwA/5/
In Chrome (26.0.1410.12 beta-m PC, 25.0.1364.99 Mac), Safari (6.0.2 Mac), and IE8-9, this will act in a desired way. .box's text stays on one line, and due to .outer-container's right float, will be exactly the size it needs to be. In Firefox, however, the text is broken into another line.
I also find a similar issue when .button is instead floated left - I get desired behavior in everything except for Firefox.
I've seen this Firefox 16.0.1 and 19.0 for PC, and 18.0.1 and 19.0 for Mac. Is this a bug?
回答1:
Add display: inline-block; to .box:
Demo
回答2:
I came across this issue today where the floating node would break line only in Firefox even after setting its display to inline-block and the reason for that was that the container node had a style setting of white-space set to nowrap.
So resetting the value of white-space to normal on the container node resolved this issue for me.
回答3:
Actually, when you are going for a solution like
http://jsfiddle.net/Volker_E/x5rPd/
you don't need a second div for your desired behavior.
回答4:
white-space: normal didn't do the trick for me. What worked was white-space: nowrap; on the direct text container.
来源：https://stackoverflow.com/questions/15102575/firefox-unexpected-line-break-using-floats-overflow-hidden