CODEWITHSUNDEEP
htmlcssinternet-explorerfirefoxflexbox
David Somekh
David Somekh

Reputation: 943

word-break: break-word not working in Firefox and IE

I am using flexbox and trying to handle long strings that don't have spaces. The variable word-break: break-word is ideal for me because it breaks only long words unlike word-break: break-all that brakes also short words instead of dropping them to the next line.

My problem is that it works only in Chrome. Is there a way to get working also in IE / FIREFOX (With flexbox) ?

Codepen: https://codepen.io/anon/pen/wqLmoO

.page {
  display: flex;
  justify-content: center;
}

.content {
  display: flex;
  border: 2px solid blue;
  justify-content: center;
}

.item {
  display: flex;
  width: 33vw;
  word-break: break-word;
}

.item_brake_all {
  display: flex;
  width: 33vw;
  word-break: break-all;
}
<p align=center><b><u>Can I get the two top DIVS to display correctly in IE / FIREFOX?</b></u>

  <p align=center>In this div the word should brake:
    <div class="page">


      <div class="content">
        <div class="item">DavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavid</div>

      </div>
    </div>

    <p align=center>In this div no word should brake:
      <div class="page">


        <div class="content">
          <div class="item">In this div the words should not brake because all the words are small. If a specific reaches the end of the container and has no room it should just fall to next line. With 'brake-all' the browser will brake the word like in the example below.</div>

        </div>
      </div>

      <p align=center><b>Example why I dont want to use brake-all:</b>
        <div class="page">


          <div class="content">
            <div class="item_brake_all">In this div the words should not brake because all the words are small. If a specific reaches the end of the container and has no room it should just fall to next line. With 'brake-all' the browser will brake the word.</div>

          </div>
        </div>

Upvotes: 1

Views: 7489

Answers (2)

Kostas Siabanis
Kostas Siabanis

Reputation: 3039

While I do believe you don't need display: flex in .item, the following will work across browsers:

.item {
  display: flex;
  flex-direction: column;
  width: 33vw;
  word-break: break-word; /* Chrome, Safari */
  word-wrap: break-word; /* IE11, Firefox */
}

Why does this work?

It would be naive to simply say that flex-direction: column forces the flex block to respect the element's width. The explanation is far more complicated, I hope some CSS guru could shed some light on this one.

Upvotes: 7

Kostas Siabanis
Kostas Siabanis

Reputation: 3039

Is there any specific reason you need display: flex in .item? If not, then word-wrap: break-word will do the same thing in IE/FF:

.item {
  /* display:flex; */
  width: 33vw;
  /*   word-break: break-word; */
  word-wrap: break-word;
}

Upvotes: 1

Related Questions