CODEWITHSUNDEEP
cssgoogle-chrome
Martin Denk
Martin Denk

Reputation: 554

in chrome, word-wrap: break-word breaks words even if there is no space

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>

Upvotes: 6

Views: 1336

Answers (5)

Regolith
Regolith

Reputation: 2971

Give a space character after the OIL or any unbreakable word. This might fix the error. Since word-wrap is breaking all the alphabets in the word.

#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>

Upvotes: 0

Oriol
Oriol

Reputation: 287950

Floating elements are out-of-flow, so they overlap following blocks, unless they establish a block formatting context. That shouldn't be a problem, because line boxes are reduced, so the text should be pushed below the float in a full-width line box.

However, for some reason, this layout confuses Chrome. To fix this, you can establish a block formatting context with display: inline-block.

#parent {
  background: yellow;
  height: 120px;
  margin-bottom: 20px;
  width: 100px;
  word-wrap: break-word;
}
#box {
  background: red;
  float: left;
  height: 100px;
  width: 100%;
}
#box + div {
  display: inline-block;
}
<div id="parent">
  <div id="box"></div>
  <div>OIL</div>
</div>
<div id="parent">
  <div id="box"></div>
  <div>OWL</div>
</div>

Upvotes: 0

Hidden Hobbes
Hidden Hobbes

Reputation: 14173

This appears to be a bug in Chrome.

In Chrome 50.0.2661.102 m the expected result was displayed

enter image description here

In Chrome 51.0.2704.103 m the undesired result is displayed

enter image description here

What can be done to avoid this issue?

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

Upvotes: 2

Saika
Saika

Reputation: 396

#parent {
      background: yellow;
      height: 120px;
      margin-bottom: 20px;
      width: 100px;
      word-wrap: break-word;
      
    }
    #box {
      background: red;
      height: 100px;
      float:left;
      width: 100%;
    }
.box-2 {
clear:both;
}
<div id="parent">
      <div id="box"></div>
      <div class="box-2">OIL</div>
    </div>
    <div id="parent">
        <div id="box"></div>
        <div>
            OIL
        </div>
    </div>

Upvotes: 0

Demeter Dimitri
Demeter Dimitri

Reputation: 618

Floating elements in css causes errors like this. In previous versions of Internet explorer, we used to see problems like this all the time.

If I float one element, and want others stay intact, I usually use "clear:both" on the next element so that that element and the elements after that would not be effected.

Upvotes: 0

Related Questions