html - 如何在宽度自动的表格上强制自动换行？

Question

通过阅读之前的一些帖子，我了解到要在表格中包装文本，我们需要添加 table-layout: fixed 和 word-wrap: break-word。但如果表格没有任何固定宽度，这将不起作用

.container {

  width: 30%;
  padding: 5px;
  background: #888;
  border: 1px dotted red;
  }

.table {
  display: table;
  table-layout: fixed;
  width: auto;
  word-wrap: break-word;
  }

<div class="container">
  <div class="table">
  <a href="#">unbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabel</a>
</div>
  
  </div>

在我的网站上，我遇到了一种情况，我无法为带有显示表格的元素提供固定宽度。

如何实现换行以使文本不会溢出？

Answer 1

您可以使用 CSS 属性 word-break 来执行此操作。

word-break: break-all 将所有单元格内容分成多行以适应宽度。

.table {
   display: table;
   table-layout: fixed;
   width: auto;
   word-break: break-all;
}

检查 http://www.w3schools.com/cssref/css3_pr_word-break.asp对于属性的其他值。