为什么分词对表格有效，而不适用于单词包装？

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规范是否提到了这种行为？

阅读其他类似的帖子，如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的形式破坏内容而使内容溢出。

以上的解释对你的问题是片面的，但我希望它能对你有所帮助。