Question

我正在使用带显示的div：table-cell on垂直居中这个文本，可以是多行。我偶然发现有些单词可以变得非常长，即使它有一个固定的宽度，这也会使元素的布局变得宽松。有没有办法用纯粹的CSS来打破这个词？

我发现word-break：破解词在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

Answer 2

试试这个

.table-cell{    word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
table-layout: fixed;}

在表格单元格上强制分词

2 个答案: