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的{{1}}（在CSS3中）不会通过将内容分解为overflow-wrap:break-word来溢出内容。

上述解释部分适用于您的问题，但我希望它会以某种方式帮助您。

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

1 个答案: