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

Question

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

105

我无法让这个例子使用 word-wrap 属性起作用...

<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中可以工作。我尝试使用严格和过渡文档类型，但都没有起作用。

- b10hazard

你尝试过添加 DOCTYPE 以便浏览器不在 IE5.5 模式下运行吗？ - Niet the Dark Absol

是的，doctype似乎不起作用。我尝试了严格和过渡。 - b10hazard

8

其他人似乎没有提到的一点是，如果它是继承的，您可能需要将空格恢复为正常状态。 - user420667

3

这个"white-space"的注释对我有用，这应该是一个合法的答案。 - Martin Shishkov

11个回答

83

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

- Farshid Ashouri

11

感谢上帝！"white-space: nowrap" 对我来说是解决方案。为什么有这么多属性可以做同样的事情？ - Stanley

1

是的，这个答案很有帮助。 white-space:nowrap可能会被继承并引起问题。应该将其设置为不同的值。在我的情况下，我将其设置为white-space:break-spaces。你也应该能够将值设置为“unset”而没有任何问题；假设已设置word-break或overflow-wrap。 - Naveed Hasan

在我的情况下，white-space: nowrap 是导致问题的原因。我不知道为什么。非常感谢！！！ - Adriana Hernández

51

使用这段代码 (来自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;

- Sunny S.M

@SunnyS.M：对于Safari 5.1.7无效..!! 如何实现？ - Satish

如何隐藏屏幕外的字符呢？ - RAMM-HDR

27

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

- Rubel Hossain

white-space: break-spaces; 也适用于 display: flex; 并且使用 margin 将您的文本包含在容器中并在必要时进行换行。这是我案例中唯一有效的解决方案。谢谢 Rubel！ - Axelle

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;

- D.Dimitrioglo

提供的代码片段在Safari 5.1.7上无法正常工作。如何修复它以适用于Safari？ - Satish

1

这个对我在手机上的Safari问题有用。谢谢你。 - Bala Sivagnanam

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 */
    }
}

- shayuna

2

这段代码也可以工作：

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

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

</body></html>

- user10254257

break-all 的问题在于它不会首先尝试在空格处断行。 - skot

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也可以。

- Ritu Gupta

1

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

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

- Balaji

0

以下的CSS代码对我很有效：

                word-break: normal;
                line-break: strict;
                hyphens: none;

- Shubham Verma

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stencil · Accepted Answer

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浏览器。