html - 在表格单元格上强制断字

Question

我正在使用一个带有 display: table-cell on 的 div 来垂直居中这个文本，它可以是多行。我偶然发现有些单词可能会变得很长，这会使元素的布局拉伸(stretch)，即使它具有固定的宽度。有没有办法用纯 css 把这个词分开？

我发现 word-break: break-word 在 Chrome 34 中有效。这正是我想要的。如果一个词有空间换行，它应该，但如果它被剪裁 - 打破那个词。但这在 Firefox 和 IE 中不起作用..

<style>
  .table {
    display: table;
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
  }

  .table-cell {
    vertical-align: middle;
    display: table-cell;
  }
</style>

<div class="table">
  <div class="table-cell">Loremipsumdolorsitamet</div>
</div>

http://jsfiddle.net/3m6Q2/

Answer 1

你应该使用 word-break:break-all;

.table-cell {
    vertical-align: middle;
    display: table-cell;
    word-break:break-all;
}

jsFiddle example