为什么 word-break 对表格有效但 word wrap 无效？

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可以断开文本。从我理解的mdn关于word-wrap和word-break的文章来看，它们之间的唯一区别是word-break会导致中文和日文文本也会断开，而word-wrap在这些语言上不起作用。那么为什么word-break可以在表格中断开单词，而word-wrap不能呢？HTML CSS规范是否提到了这种行为？

阅读一些其他类似的帖子，比如这个，这个和这个，另一个值得注意的事情是，为什么将table-layout: fixed添加到表格中可以使word-wrap断开单词？

- user31782

---

似乎在Firefox中word-break的行为与Chrome不同。我在使用Chrome时发布了这个问题。 - user31782

Answer 1

table-layout: fixed在此处起作用的原因是，对于

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

以及对于

table-layout: auto：列宽由单元格中最宽的不可分割内容设置，而不考虑列宽。

因此，现在的 word-wrap:break-word（在CSS3中为 overflow-wrap:break-word）不允许内容溢出，因为它会像 table-layout: fixed 一样将内容分解。

上述解释只是针对您的问题的部分解释，但我希望它能在某种程度上帮到您。

- Uday

---

我很感激你的帮助。但对我来说，这个解释有些矛盾...“（可能会导致单元格溢出）”似乎意味着文本会溢出而不是换行。 - user31782

谢谢，这条线 (导致单元格溢出) 的意思是，如果设置了 word-wrap:break-word，则文本将被换行，否则在 table-layout: fixed 的情况下会发生溢出。 - Uday