自动换行断字在此示例中不起作用

74

我无法使用自动换行功能来处理此示例...

<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严格和过渡性的方法，但都没有用。

html css

— b10危险
source

您是否尝试过添加DOCTYPE以便浏览器不能在IE5.5模式下运行？

— Niet the Dark Absol 2012年

是的，文档类型似乎无效。我尝试了严格和过渡。

— b10hazard 2012年

4

其他人似乎未提及的一件事，如果继承了空白，则可能必须将其恢复为正常。

— user420667 '16

3

此white-space评论对我

— 有用

105

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。

— 模版
source

8

这与word-wrap：break-word不同；使用word-break：break-all“可以在任何字符之间插入分词符”

— m.spyratos

这不是一个解决方案，而是一个另类，在一个比较极端的方式工作（打破所有）

— 无忌

不适用于Safari 5.1.7 .. !! 如何做到这一点？

— Satish

Firefox：内联阻止方法导致<td>的堆积，这不是我想要的。在下一个答案中描述的整体解决方案效果很好。

— Betty Mock

在Chrome中为我word-break:break-word工作，word-wrap:break-word但没有工作。

— 弗兰克（Frank）

41

使用此代码（取自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;

— 阳光SM
source

@ SunnyS.M：不适用于Safari 5.1.7 .. !! 如何做到这一点？

— Satish

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

— SUB-HDR

20

Work-Break has nothing to do with `inline-block`.

Make sure you specify `width` and notice if there are any overriding attributes in parent nodes. Make sure there is not `white-space: nowrap`.

See [this][1] codepen.



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





  [1]: https://codepen.io/ourway/pen/vYYdOay

— Farsheed
source

3

感谢上帝！空白：nowrap是我的解决方案。有多少个属性可以做同一件事？

— 斯坦利

1

是的，这个答案很有帮助。white-space：nowrap可能会被继承并导致问题。应该将其设置为其他值。就我而言，我将其设置为white-space：break-spaces。您还应该可以毫无问题地将该值设置为“未设置”；假设设置了断字或自动换行

— Naveed Hasan

7

属性的组合为我提供了帮助：

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;

— 狄米特里格洛
source

提供的代码段不适用于Safari 5.1.7。如何修复Safari浏览器

— 萨蒂什

1

这对我来说适合移动旅行的问题。谢谢你

— Bala Sivagnanam

2

为了使智能中断（断字）在不同的浏览器上正常工作，对我有用的是以下规则集：

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

— 沙尤纳
source

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>

展开摘要

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单独使用就可以了。

— 里图古普塔
source

0

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

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

— 巴拉吉
source