91

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

<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，但都没有奏效。

4

10 回答 10

118

Mozilla 火狐解决方案

添加：

display: inline-block;

以你的风格td。

基于 Webkit 的浏览器（Google Chrome、Safari等）解决方案

添加：

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

以你的风格td。

注意：请 注意，就目前而言，break-word这不是 webkit 标准规范的一部分；因此，您可能有兴趣使用break-all。这个替代值提供了一个毫无疑问的激进解决方案。但是，它符合标准。

歌剧解决方案

添加：

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

以你的风格td。

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

于 2012-05-24T19:22:48.103 回答
48

使用适用于所有浏览器的代码（取自 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;
于 2015-10-19T12:41:11.713 回答
48

Work-Break 与 . 无关inline-block。

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

看到这个代码笔

<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;
      -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>

于 2019-11-04T00:24:21.053 回答
16 
max-width: 100px;
white-space: break-spaces;
于 2021-04-09T11:09:44.373 回答
9

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

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;
于 2015-09-11T13:05:27.413 回答
2

为了让智能中断（break-word）在不同的浏览器上运行良好，对我有用的是以下规则集：

#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 */
    }
}
于 2018-03-06T09:59:34.800 回答
1

此代码也有效：

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

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

</body></html>

于 2019-02-01T10:09:12.677 回答
1
  • 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单独使用就好了。

于 2020-09-18T13:32:26.500 回答
0

word-wrap物业工作display:inline-block：

display: inline-block;
word-wrap: break-word;
width: 100px;
于 2019-02-01T10:18:33.420 回答
0

只需将容器的宽度指定为 100，然后添加display: block.

<div class="parent"><span>dummy text dummy text dummy text dummy text </span></div>
.parent
{
width:100%;
display:block
}
于 2021-09-17T05:55:31.210 回答