为什么分词适用于表格而不适用于自动换行？

Question

考虑以下示例：

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

正如您在第一个表中看到的那样，word-wrap 无法将文本换行。但在第二张表中word-break 可能会破坏文本。据我从关于word-wrap 和word-break 的mdn 文章中了解到，它们之间的唯一区别是word-break 甚至会导致中文和日文文本中断，而word-wrap 不适用于这些语言。现在为什么word-break 可以打破表格中的单词但word-wrap 不能？ html css 规范是否提到了这种行为？

阅读了一些其他类似的帖子，如this、this 和this，我发现另一件不寻常的事情是为什么在表格中添加table-layout: fixed 允许word-wrap 断词？

Answer 1

table-layout: fixed之所以在这里工作是因为

table-layout: fixed :- 水平布局只取决于表格的宽度和列的宽度，而不是单元格的内容。（如果没有设置word-wrap:break-word，可能会导致单元格溢出）

对于

table-layout: auto :- 列宽由单元格中最宽的不可破坏内容设置，与列宽无关。

所以 word-wrap:break-word 现在是 overflow-wrap:break-word（在 CSS3 中）不允许内容通过破坏 table-layout: fixed 的内容而溢出。

上面的解释对你的问题是部分的，但我希望它会对你有所帮助。