word-wrap break-word 在本例中不起作用答案

【问题标题】：word-wrap break-word does not work in this exampleword-wrap break-word 在本例中不起作用
【发布时间】：2012-05-31 09:46:39
【问题描述】：

我无法让自动换行与此示例一起使用...

<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，但都没有成功。

【问题讨论】：

您是否尝试过添加 DOCTYPE 以使浏览器无法在 IE5.5 模式下运行？
是的，文档类型似乎不起作用。我尝试了严格和过渡。
其他人似乎没有提到的一件事，如果它是继承的，您可能必须将空格恢复正常。
这个white-space 评论对我有用，这应该是一个合法的答案

标签： html css

【解决方案1】：

只要指定容器的宽度为100，然后加上display: block即可。

<div class="parent"><span>dummy text dummy text dummy text dummy text </span></div>
.parent
{
width:100%;
display:block
}

【讨论】：

【解决方案2】：

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

【讨论】：

空白：中断空间；也适用于 display: flex;以及将文本包含在容器内的边距，并在必要时中断。唯一适用于我的解决方案。谢谢你鲁贝尔！

【解决方案3】：

Work-Break 与inline-block 无关。

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

见thiscodepen

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

【讨论】：

感谢上帝！ white-space: nowrap 是我的解决方案。做同样的事情怎么会有这么多属性？
是的，这个答案很有帮助。 white-space:nowrap 可能会被继承并导致问题。它应该设置为不同的值。就我而言，我将其设置为空白：中断空间。您还应该能够将值设置为“未设置”，而不会出现任何问题；假设设置了 word-break 或 overflow-wrap
在我的情况下 white-space: nowrap 导致了问题。我不知道为什么。非常感谢！！！！

【解决方案4】：

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 就可以了。

【讨论】：

【解决方案5】：

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

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;

【讨论】：

提供的片段不适用于 Safari 5.1.7。如何为 Safari 修复它
这在移动、野生动物园问题上对我有用。谢谢你。

【解决方案6】：

word-wrap 属性与display:inline-block 合作：

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

【讨论】：

【解决方案7】：

此代码也有效：

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

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

</body></html>

【讨论】：

break-all 的问题是它不会先尝试打破空格。

【解决方案8】：

使用适用于所有浏览器的代码 (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;

【讨论】：

@SunnyS.M：不适用于 Safari 5.1.7..！！如何做到这一点？
如何隐藏屏幕外字符；

【解决方案9】：

为了让智能中断（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 */
    }
}

【讨论】：

【解决方案10】：

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。

【讨论】：

这和 word-wrap:break-word 不一样； with word-break:break-all "可以在任意字符之间插入分词"
这不是一个解决方案，而是一个以相当极端的方式工作的替代方案（全部中断）
不适用于 Safari 5.1.7..！！如何做到这一点？
Firefox：内联块方法导致被堆叠，这不是我想要的。下一个答案中描述的全部分解效果很好。
在 Chrome 中为我工作，word-break:break-word 工作，而 word-wrap:break-word 没有。