The following markup and CSS causes weird behaviour in Chrome:
#parent {
background: yellow;
height: 120px;
margin-bottom: 20px;
width: 100px;
word-wrap: break-word;
}
#box {
background: red;
float: left;
height: 100px;
width: 100%;
}
<div id="parent">
<div id="box"></div>
<div>OIL</div>
</div>
<div id="parent">
<div id="box"></div>
<div>OWL</div>
</div>
Fiddle: https://jsfiddle.net/7sq3ybxr/
The upper example (containing the word OIL), causes word breaks even though there is literally no room to the right. The lower one doesn't. I'm assuming it's got something to do with the character width. In other browsers, the word is always displayed below the box, as expected.
Does anybody know what causes this behaviour or have an idea for a workaround? The size, float and word-wrap properties must stay, however.
Edit: Oh, by the way, writing the markup like this seems to fix it, but it's not something I have control over (imagine user input via tinyMCE):
<div id="parent">
<div id="box"></div>
<div>
OIL
</div>
</div>
I imagine that this bug will be fixed in time, but in the meantime you could use letter-spacing
to increase the amount of space taken by the letters and force the expected behaviour.
.parent {
background: yellow;
height: 120px;
margin-bottom: 20px;
width: 100px;
word-wrap: break-word;
}
.box {
background: red;
float: left;
height: 100px;
width: 100%;
}
.word {
letter-spacing: 1.8px;
}
<div class="parent">
<div class="box"></div>
<div class="word">OIL</div>
</div>
<div class="parent">
<div class="box"></div>
<div class="word">OWL</div>
</div>
JS Fiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With