`word-break: break-word`的替代方案

Question

有没有在火狐浏览器中可用的word-break: break-word的替代方案？

在火狐浏览器[版本57.0]中：

在Chrome浏览器[版本62.0.3202.94]中：

是否有一种方法或替代方案也能在火狐浏览器中使用break-word属性？[如果它在旧版本中可用则更好]

代码示例：

table {
  width: 300px;
  display: inline-block;
  overflow: hidden;
  word-break: break-word;
}

.text-right {
  width: 30%;
}

<table>
  <tr>
    <td class="text-right">Sample text </td>
    <td>Sample texttexttexttexttexttexttexttext 000000000000000000000000000000</td>
  </tr>
</table>

- Jithin Raj P R

---

尝试这个：word-break: break-all; - stalinrajindian

我不想使用 word-break: break-all;，因为它会打断所有单词而不考虑它们的结构。 - Jithin Raj P R

Answer 1

我来晚了，但我认为我找到了答案。

我经常使用word-break: break-word，因为在大多数情况下它非常完美。如果有足够的空间，它会换行并保留单词；如果没有足够的空间，它就会分隔单词。 MDN Web Docs说word-break: break-word已被弃用，但仍然可以使用，但我开始寻找替代方案的真正原因是visual studio不再自动完成break-word :)

解决方案?

MDN - overflow-wrap

overflow-wrap: anywhere;

将单词包装到新行中，只有在需要时才会分隔单词。

"该属性最初是一个名为word-wrap的非标准和未加前缀的Microsoft扩展，并由大多数浏览器以相同的名称实现。 之后将其重命名为overflow-wrap，word-wrap成为其别名。"

因此，应该使用overflow-wrap而不是word-wrap。

var s = document.querySelector('div');

function a(){
  s.removeAttribute('class');
  s.classList.add('a');

}

function b(){
  s.removeAttribute('class');
  s.classList.add('b');

}

#class{
  border: 1px solid rgb(255, 120, 120);
  width: 100px;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 2px;
}

btn{
  border: 1px solid gray;
  padding: 2px;
  border-radius: 5px;
  box-shadow: 0 0 2px gray;
  cursor: pointer;
}

.a{
  overflow-wrap: normal;
}

.b{
  overflow-wrap: anywhere;
}

<span>overflow-wrap:</span>
<btn onClick="a()">Normal</btn>
<btn onClick="b()">Anywhere</btn>

<div id='class'>
  We need a very long word like Supercalifragilisticexpialidocious 
</div>

<i>There's also overflow-wrap: break-word;</i>

- RDU

---

这段内容的翻译如下：这在所有地方都可以正常工作，但在 2021 年早期的 Safari 上无法正常工作。https://caniuse.com/?search=overflow-wrap%3A%20anywhere%3B. 是否有任何简单的方法可以“polyfill”或修补 Safari，而不是 Chrome、Firefox 或 Edge？ - andersnylund

Answer 2

word-break 属性的有效值如下：

/* Keyword values */
word-break: normal; 
word-break: break-all; 
word-break: keep-all;

/* Global values */
word-break: inherit;
word-break: initial;
word-break: unset;

word-break CSS属性指定浏览器是否应该在文本溢出其内容框时插入换行符。

Chrome，Safari和其他WebKit / Blink浏览器还支持非官方的break-word值，该值被视为word-wrap: break-word。

所以你可以使用word-wrap: break-word代替吗？

- Yvonne Aburrow

---

但是 word-wrap: break-word 只会在有单词的情况下断开行，如果是没有单词的行，则会溢出 div。但是在 Chrome 中，word-break: break-word 会在溢出 div 时断开行，并且也会尊重单词。[我正在寻找这样的解决方案] - Jithin Raj P R

谢谢澄清。您能在您的原始帖中添加一段代码片段吗？ - Yvonne Aburrow

我为你们放了一个示例代码[很简单的一个], 希望你们能明白要点。 - Jithin Raj P R

感谢您提供的参考资料和花费的时间。但我想知道是否有关于这个问题的新帖子或技巧，而不需要使用“脚本”。为了感谢您的努力，我会给您一个+1，但很抱歉我不想要这样的答案。 - Jithin Raj P R

谢谢你的点赞 :) 我想你需要使用某种 polyfill 脚本，恐怕是这样。我发现 overflow-wrap: break-word，但在 Firefox 中也不起作用 :( - Yvonne Aburrow

Answer 3

根据Bugzilla上的此线程，自Firefox 67版本起，word-break：break-word现在可以使用了。它在此更改集中得到了实施。

在MDN文档中，break-word附带了以下注释：

这个已弃用的API不应再使用，但可能仍然有效。

- G-Ram

---

它一定已经更新了。看起来只是在语法中加入了一个注释，指示break-word已被弃用。 - G-Ram

Answer 4

为了与旧版内容兼容，word-break属性还支持一个已弃用的break-word关键字。当指定时，它具有与word-break: normal和overflow-wrap: anywhere相同的效果，而不管overflow-wrap属性的实际值如何。源代码在这里 它在我的网站上运行得非常完美。

- user2759685

Answer 5

若要操作单词，你可以使用两种 CSS 属性: word-break 和 word-wrap:

• word-break: https://www.w3schools.com/cssref/css3_pr_word-break.asp
• word-wrap: https://www.w3schools.com/cssref/css3_pr_word-wrap.asp

- mickaelw

---

我知道这个兄弟。我的问题是在火狐浏览器中有没有创建"break-word"的解决方案。 - Jithin Raj P R

@weBer，属性word-break中不存在值break-word，因此我认为火狐浏览器返回错误是正常的。你期望怎样？ - mickaelw

Chrome、Safari和其他WebKit/Blink浏览器也支持非官方的break-word值，该值被视为word-wrap: break-word。 - Yvonne Aburrow

@mickaelw 我只是在问是否有另一种行为方式的替代方案。 - Jithin Raj P R

@weBer，我刚刚看到了你在Yvonne的回答中的评论。你能在你的问题中添加一个示例吗？ - mickaelw

@mickaelw 我为你们放了一个示例代码[很简单的一个]，希望你们能明白要点。 - Jithin Raj P R