Question

我无法使用自动换行使用此示例...

<html>
<head></head>
<body>

<table style="table-layout:fixed;">
<tr>
<td style="word-wrap: break-word; width:100px;">ThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrap</td>
</tr>
</table>

</body></html>

我记得读过必须指定布局（我做过），但除此之外，我不知道我必须做些什么才能让它工作。我真的希望这能在Firefox中运行。感谢。

编辑：在Chrome 19和Firefox 12中失败，它适用于IE8。我试过doctype strict和transitional，都没有用。

Answer 1

Mozilla Firefox 解决方案

添加：

display: inline-block;

指向td。

的样式

**基于Webkit的浏览器（ Google Chrome ， Safari ，...）解决方案**

添加：

display: inline-block;
word-break: break-word;

指向td。

的样式

<强> 注意：的请注意，就目前而言，break-word不是webkit标准规范的一部分;因此，您可能有兴趣使用break-all代替。这种替代价值提供了无疑是极为激烈的解决方案;但是，它符合标准。

Opera 解决方案

添加：

display: inline-block;
word-break: break-word;

指向td。

的样式

前一段以类似的方式适用于Opera。

Answer 2

使用适用于所有浏览器的代码（taken from css-tricks）

overflow-wrap: break-word;
word-wrap: break-word;

-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;

/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;

Answer 3

这种属性组合对我有帮助：

display: inline-block;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: normal;
line-break: strict;
hyphens: none;
-webkit-hyphens: none;
-moz-hyphens: none;

Answer 4

max-width: 100px;
white-space: break-spaces;

Answer 5

工作中断与inline-block无关。

确保指定width，并注意父节点中是否有任何覆盖属性。确保没有white-space: nowrap。

请参见this码笔。

<html>

<head>
</head>

<body>
  <style scoped>
.parent {
  width: 100vw;
}

p {
  border: 1px dashed black;
  padding: 1em;
  font-size: calc(0.6vw + 0.6em);
  direction: ltr;
  width: 30vw;
  margin:auto;
  text-align:justify;
  word-break: break-word;
  white-space: pre-line;
  overflow-wrap: break-word;
  -ms-word-break: break-word;
  word-break: break-word;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}


}
  </style>
  <div class="parent">

<p>
  Note: Mind that, as for now, break-word is not part of the standard specification for webkit; therefore, you might be interested in employing the break-all instead. This alternative value provides a undoubtedly drastic solution; however, it conforms to
  the standard.

</p>

  </div>

</body>

</html>

Answer 6

让智能休息（破解词）在不同浏览器上运行良好，对我有用的是以下规则：

#elm {
    word-break:break-word; /* webkit/blink browsers */
    word-wrap:break-word; /* ie */
}
-moz-document url-prefix() {/* catch ff */
    #elm {
        word-break: break-all; /* in ff-  with no break-word we'll settle for break-all */
    }
}

Answer 7

inline-block在这种情况下没有用

解决方案

word-break: normal|break-all|keep-all|break-word|initial|inherit;
您的疑问的简单答案是“在上方使用”，并确保white-space: nowrap未被使用。

要更好地理解：

word-wrap / overflow-wrap用于打破溢出其容器的单词
word-break属性会在一行的末尾断开所有单词，即使是那些通常会换行到另一行且不会溢出其容器的单词。
word-wrap是历史和非标准财产。它已重命名为overflow-wrap，但仍是别名，浏览器将来必须支持。许多浏览器（尤其是旧的浏览器）不支持overflow-wrap，并要求word-wrap作为后备（所有浏览器都支持）。
如果要取悦W3C，则应考虑将两者都与CSS关联。如果您不这样做，那么仅使用word-wrap就可以了。

Answer 8

此代码也有效：

<html>
<head></head>
<body>

<table style="table-layout:fixed;">
<tr>
<td style="word-break: break-all; width:100px;">ThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrap</td>
</tr>
</table>

</body></html>

Answer 9

word-wrap属性与display:inline-block一起使用：

display: inline-block;
word-wrap: break-word;
width: 100px;

word-wrap break-word在这个例子中不起作用

9 个答案:

Mozilla Firefox 解决方案

**基于Webkit的浏览器（ Google Chrome ， Safari ，...）解决方案**

Opera 解决方案