Why does "word-break" work, but "word-wrap" does not work?

Question

I had an easy layout using flexbox.

.wrap {
  display: flex;
  justify-content: space-between;
  width: 100vw;
}

.wrap .left,
.wrap .right {
  flex: 1;
}

.wrap .left {
  background: blue;
}

.wrap .right {
  background: green;
}

<div class="wrap">
  <div class="left">hello!</div>
  <div class="right">world!</div>
</div>

This layout overflows the flex container, if the flex item has long text.

.wrap {
  display: flex;
  justify-content: space-between;
  width: 100vw;
  border: 3px solid red;
}

.wrap .left,
.wrap .right {
  flex: 1;
}

.wrap .left {
  background: blue;
}

.wrap .right {
  background: green;
}

<div class="wrap">
  <div class="left">hello!</div>
  <div class="right">world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!</div>
</div>

So I used the overflow-wrap property. But it did not work.

.wrap {
  display: flex;
  justify-content: space-between;
  width: 100vw;
  border: 3px solid red;
  overflow-wrap: break-word; /* add */
}

.wrap .left,
.wrap .right {
  flex: 1;
}

.wrap .left {
  background: blue;
}

.wrap .right {
  background: green;
}

<div class="wrap">
  <div class="left">hello!</div>
  <div class="right">world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!</div>
</div>

Strangely, "word-break" with the same role as "overflow-wrap" worked fine. ("word-break: break-word;" does not work with Firefox, it works on Chrome)

.wrap {
  display: flex;
  justify-content: space-between;
  width: 100vw;
  border: 3px solid red;
  word-break: break-word; /* add */
}

.wrap .left,
.wrap .right {
  flex: 1;
}

.wrap .left {
  background: blue;
}

.wrap .right {
  background: green;
}

<div class="wrap">
  <div class="left">hello!</div>
  <div class="right">world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!</div>
</div>

What is the difference between "word-break" and "word-wrap"? From the W3C document, we could not find any differences related to the above behavior.

I read two sections of CSS Text Module Level 3.

This must be of interest for you: https://stackoverflow.com/questions/1795109/what-is-the-difference-between-word-break-break-all-versus-word-wrap-break/1795878 — Takit Isy, Nov 28 '18 at 12:57
@Daut > "overflow-wrap: break-word" is to prevent overflow, normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line. ( [source](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#Values) ) So, if you set "overflow-wrap: break-word", "world! World! World!" And "world! World! World!" Should be folded back. — hayyvy, Nov 28 '18 at 12:57
I think the problem may lie with flex allowing children to overflow if the content is too large, therefore the word break doesn't kick in — Pete, Nov 28 '18 at 13:00
@Takitlsy > Thank you for a good link! There were some helpful answers, but none of them mentioned the specifications. I would like to read and understand specifications if possible. — hayyvy, Nov 28 '18 at 13:12
@pete > I thought so. However, because the result differs between "word-break" and "word-wrap", there may be something different between the two. — hayyvy, Nov 28 '18 at 13:15
*In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.* https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap. As it is not overflowing the child due to the flex constraints, it does not break — Pete, Nov 28 '18 at 13:17
@Pete > I do not know the difference between "break-word" specified by "word-break" and "break-word" specified by "overflow-wrap". Do not they have the same role in the same role? https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#Values , https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#Values — hayyvy, Nov 28 '18 at 13:25

score 1 · Answer 1 · answered Nov 28 '18 at 13:31

They are very similar. One problem is that word-break: break-word is still experimental and might cause problems.

But the issue here is display:flex because in order for overflow-wrap: break-word to work it needs to be applied on an element that

has a visual rendering, is an inline element with explicit height/width, is absolutely positioned and/or is a block element.

So for example adding a width to right but not to left causes this difference. Both are having overflow-wrap: break-word but only one has a specific width.

This is the only difference i could think of between word-break and overflow-wrap when both have break-word as value.

.wrap {
  display: flex;
  justify-content: space-between;
  width: 100vw;
  border: 3px solid red;
  overflow-wrap:break-word;
}

.wrap .left,
.wrap .right {
  flex: 1;
}

.wrap .left {
  background: blue;
}

.wrap .right {
  background: green;
  width:50%;
}

<div class="wrap">
  <div class="left">aaa wordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordw bbb!</div>
  <div class="right">aaa wordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordword bbb</div>
</div>

Thank you very much for the interesting information. Certainly, some people say the same thing as "has a visual rendering, is an inline element with explicit height / width, is absolutely positioned and / or is a block element." However, it is not written in the specification ( [CSS Text Module Level 3](https://drafts.csswg.org/css-text-3/#overflow-wrap-property) ). Is this due to the implementation of the browser? Or is this written somewhere in the specification? — hayyvy, Nov 29 '18 at 05:13
i have not seen it anywhere in the specification but i guess the word `wrap` means that the property has to know where to wrap ( the borders of the content box ) so that is why it works on elements that have a specific width. I am sorry i cannot give more info about this .. — Mihai T, Dec 05 '18 at 09:50

score 1 · Answer 2 · answered Nov 28 '18 at 20:03

As you already noticed both should behave the same and the issue is somehow related to flexbox. If we use a layout without flexbox, both gives the same result:

.right {
  background: green;
  margin:10px;
}

<div class="right" style="word-break: break-word;">world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!</div>

<div class="right" style="overflow-wrap: break-word;">world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!</div>

I don't know exaclty why, but it seems related to the min-width setting of flexbox. It can be a bug or something else that make both properties behave differently.

In order to fix the issue you can add min-width:0 to override the default min-width setting:

.wrap {
  display: flex;
  justify-content: space-between;
  width: 100vw;
  border: 3px solid red;
  overflow-wrap: break-word; /* add */
}

.wrap .left,
.wrap .right {
  flex: 1;
}

.wrap .left {
  background: blue;
}

.wrap .right {
  background: green;
  min-width:0;
}

<div class="wrap">
  <div class="left">hello!</div>
  <div class="right">world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!</div>
</div>

Thank you very much for the interesting information. I was able to confirm that `overflow-wrap` works by using `min-width` . This suggests that there is a problem with the control of the width by flexbox. However, it is strange that only `overflow-wrap` is influenced among`overflow-wrap` and `word-break` which have exactly the same role. There should be something wrong with `overflow-wrap` and` word-break`, but I could not find it. Do you know something? — hayyvy, Nov 29 '18 at 06:31
@hayyvy me too I am missing that part, not able to find where this is described so it can probably be a bug at the end. — Temani Afif, Nov 29 '18 at 08:43
I think that the contents written in this section are related, but the terms that appear are difficult and I can not read it yet. [5.1. Line Breaking Details](https://drafts.csswg.org/css-text-3/#line-break-details) — hayyvy, Nov 29 '18 at 10:02
@hayyvy yes not easy to dig into the specification and this one is a working draft so it may change at any time — Temani Afif, Nov 29 '18 at 11:20
Note: using `overflow: hidden` will have a similar effect as `min-width: 0`. — mfluehr, Jul 10 '19 at 17:54

Why does "word-break" work, but "word-wrap" does not work?

2 Answers2