-1

Is there a difference between overflow-wrap: break-words and word-break: break-words?

I read here and there that there is no difference, but my tests show that there is:

<!-- actually break words -->
<table style="width: 100px; border: 1px solid red">
  <tr>
    <td>
      <div style="word-break: break-word">
        hdsqdhsqydhsqgydqgsydgysqgydsqgydsgqydygsqgydsqgy
      </div>
    </td>
  </tr>
</table>

<!-- do not break words -->
<table style="width: 100px; border: 1px solid red">
  <tr>
    <td>
      <div style="overflow-wrap: break-word">
        hdsqdhsqydhsqgydqgsydgysqgydsqgydsgqydygsqgydsqgy
      </div>
    </td>
  </tr>
</table>

enter image description here

Why does the first case work as intended and not the second?

rap-2-h
  • 30,204
  • 37
  • 167
  • 263
  • Because you are using tables - which don't have to adhere to your attempt to limit their width, unless you set `table-layout:fixed;`. Your second table simply stretches as wide as necessary without breaking the content – CBroe Jan 31 '23 at 13:59
  • Duplicate of [overflow-wrap: break-word vs. word-break: break-word](https://stackoverflow.com/questions/66724509/overflow-wrap-break-word-vs-word-break-break-word) – Guy Incognito Jan 31 '23 at 14:02
  • @CBroe Thank you! You can post your comment as an answer! – rap-2-h Jan 31 '23 at 14:05
  • @GuyIncognito Not the same question! – rap-2-h Jan 31 '23 at 14:06
  • I fail to see what the difference is – Guy Incognito Jan 31 '23 at 14:07
  • Not the same question, but the same underlying explanation, I think. `float` was what provided the _"something that sizes according the min content intrinsic size"_ context over there, here it is the table instead. – CBroe Jan 31 '23 at 14:11

1 Answers1

1

They behave like that in this specific situation here, because you have this wrapped in tables.

At table does not have to adhere to a width you try to specify, it is able to extend if the content requires it - unless table-layout: fixed is set.

The situation here is similar to https://stackoverflow.com/a/66828278/1427878,

The difference lies in the way min content intrinsic sizes are calculated. Soft wrap opportunities introduced by the break are taken into account for word-break:break-word but not for overflow-wrap:break-word. So for an example of the difference between them, we need to choose something that sizes according the min content intrinsic size, such as a float:

Only here it is the table width calculation behavior that triggers it, instead of a float.

CBroe
  • 91,630
  • 14
  • 92
  • 150