Question

word-break: break-word是否有替代在Firefox中有效？

在Firefox [版本57.0]

在Chrome [版本62.0.3202.94]

中

还有一种方法或替代方法在firefox中使用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>

Answer 1

valid values of 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吗？

Answer 2

根据Bugzilla上的this thread，断字：断字现已在Firefox 67版及更高版本中使用。它已在this changeset中实现。

在MDN docs中，此注释随附了断行符：

此已弃用的API应该不再使用，但可能仍会使用工作。

Answer 3

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

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

解决方案？

MDN - overflow-wrap

<块引用>

溢出包装：任何地方；

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

“该属性最初是一个名为 word-wrap 的非标准和无前缀的 Microsoft 扩展，并由大多数同名浏览器实现。它已被重命名为 overflow-wrap，word-wrap 是别名。”< /p>

所以应该使用 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 4

为了与旧内容兼容，word-break 属性还支持已弃用的 break-word 关键字。指定后，这与 word-break: normal 和 overflow-wrap: 任何地方的效果相同，而不管 overflow-wrap 属性的实际值如何。来源here 它在我的网站上运行良好。

Answer 5

要在你的情况下操纵单词，你有两个CSS属性：word-break和自动换行：

分词：https://www.w3schools.com/cssref/css3_pr_word-break.asp
自动换行：https://www.w3schools.com/cssref/css3_pr_word-wrap.asp

替代`word-break：break-word`

5 个答案: