断字的替代：断字

Question

是否有替代了word-break: break-word在Firefox的作品？

在Firefox中[版本57.0]

在Chrome中[版本62.0.3202.94]

break-word在firefox中也有使用属性的方法或替代方法吗？[ 如果它在较旧的版本中有效，那就更好了。]

样例代码

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>

Answer 1

我参加聚会有点晚了，但我想我找到了答案。

我一直使用它word-break: break-word，因为它在大多数情况下都是完美的，如果有足够的空间，它会包裹并保留单词，如果没有足够的空间，它会破坏单词。MDN Web Docs说这word-break: break-word已被弃用，但可能仍然有效，但我开始寻找替代方案的真正原因是 Visual Studio 不再自动完成break-word:)

解决方案 ？

MDN-- 溢出换行

溢出换行：任何地方；

将单词换行到新行，并且仅在需要时才中断单词。

“该属性最初是一个非标准且无前缀的 Microsoft 扩展，称为 word-wrap，并由大多数同名浏览器实现。此后它已重命名为 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>

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-breakCSS属性指定浏览器是否应插入换行符无论文本，否则溢出其内容框。

Chrome、Safari 和其他 WebKit/Blink 浏览器也支持break-word像word-wrap: break-word.

那你可以用word-wrap: break-word吗？