Take a look at this example:
.table {
width: 50px;
display: table;
padding: 10px;
border: 1px solid red;
}
.table a {
word-wrap: break-word;
}
.table2 a {
word-break: break-all;
} <div class="table">
<a href="#">doNotClickMedoNotClickMedoNotClickMedoNotClickMe</a>
</div>
<div class="table table2">
<a href="#">doNotClickMedoNotClickMedoNotClickMedoNotClickMe</a>
</div> In the first table, the word-wrap property does not break the text to a new line. However, in the second table, the word-break property is successful in breaking the text. According to the MDN articles on word-wrap and word-break, the main difference between them is that word-break can break even Chinese and Japanese text, whereas word-wrap cannot handle those languages. How is it that word-break can break words in tables while word-wrap cannot? Is this behavior specified in the HTML CSS specifications?
Upon considering other similar posts such as this, this, and this, another interesting observation is why adding table-layout: fixed to the table allows word-wrap to successfully break words?