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

Question

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

在火狐[版本 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>

score 7 · Accepted Answer

的有效值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;

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

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

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

score 2 · Accepted Answer

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

我一直使用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>

score 2 · Accepted Answer

根据 Bugzilla 上的这个线程，word-break: break-word 现在可以在 Firefox 67 版中使用。它在这个 changeset中实现。

MDN 文档中的这个注释确实附带了break-word ：

不应再使用此已弃用的 API，但可能仍然可以使用。

score 0 · Accepted Answer

要在您的情况下操作单词，您有两个 CSS 属性：word-break 和 word-wrap：

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

score 0 · Accepted Answer

为了与旧内容兼容，word-break 属性还支持不推荐使用的 break-word 关键字。指定时，这与 word-break: normal 和 overflow-wrap:anywhere 具有相同的效果，而与 overflow-wrap 属性的实际值无关。来源在这里它在我的网站上运行良好。

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

5 回答 5

Related

Reference