Question

在一个宽度大小为97％的表格中，以及一个长单个单词，如

<td style="word-wrap: break-word;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>

将

添加到表格单元格中，其中自动换行设置为break-word不会破坏该单词。它超过了表格的97％宽度。

这是问题的JSFiddle，其中两个表创建时具有相同的样式，但是一个表的单元格具有单个长字，另一个表格带有空格。

http://jsfiddle.net/E5b52/

有人知道如何解决这个问题吗？

编辑 - 请注意，无法为已装入的单元格提供固定宽度。

Answer 1

请改为尝试：

.table-cell {
    display:table-cell;
    word-break:break-all;
    padding:5px;
}

http://jsfiddle.net/E5b52/4/

Answer 2

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

Check updated demo

Answer 3

使用以下CSS属性：

white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
white-space: pre-wrap;       /* css-3 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
word-break: break-all;
white-space: normal;

你应该试试这个：

.table-cell {
  display:table-cell;
  padding:5px;
  white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  white-space: pre-wrap;       /* css-3 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
  word-break: break-all;
  white-space: normal;    
}

Working Example

打破单词长单词不起作用

3 个答案: