Firefox 将单词从斜线断开答案

【问题标题】：Firefox breaks word from slashFirefox 将单词从斜线断开
【发布时间】：2019-10-15 03:17:45
【问题描述】：

为什么 Firefox 将单词从 /（斜杠）和 -（连字符）分成几行。

/ 和 - 的示例

table {
  width: 100%;
}

<table>
  <tbody>
    <tr>
      <td>
        LoremipsumdolorsitametconsecteturadipisicingelitLaboredistinctionamdoloresmodiamet/etblanditiisarchitectsundolorem/qnullobcaecatnobilibermollitia/sialiquiodiomagncommodi.

      </td>
    </tr>
  </tbody>
</table>

没有/ 和- 的示例

table {
  width: 100%;
}

<table>
  <tbody>
    <tr>
      <td>
        LoremipsumdolorsitametconsecteturadipisicingelitLaboredistinctionamdoloresmodiametetblanditiisarchitectsundoloremqnullobcaecatnobilibermollitiasialiquiodiomagncommodi.
      </td>
    </tr>
  </tbody>
</table>

这两个示例在其他浏览器中运行良好，我尝试过 overflow-wrap 但没有成功。

我正在使用 Firefox 67.0 (64-bit)。

请在 Firefox 中打开它。

【问题讨论】：

标签： html css firefox cross-browser

【解决方案1】：

您可能想为正斜杠和破折号尝试 HTML 代码。

For / use &#47;
For - use &#8211;

更多信息在这里：https://www.ascii.cl/htmlcodes.htm

【讨论】：

是动态内容

【解决方案2】：

看起来 Mozilla 正在考虑将 / 和 - 作为空白分隔符。经过一个小的研究，我建议在将其发送到表格之前，使用其 html 等效代码转义 / 和 -。

更新
找到了另一个在 mozilla 中也可以使用的纯 CSS 解决方案

table {
  width: 100%;
}

table td { 
    word-break: keep-all; 
}

<table>
  <tbody>
    <tr>
      <td>
        LoremipsumdolorsitametconsecteturadipisicingelitLaboredistinctionamdoloresmodiamet/etblanditiisarchitectsundolorem/qnullobcaecatnobilibermollitia/sialiquiodiomagncommodi.

      </td>
    </tr>
  </tbody>
</table>

这是一个小的 JS 片段，它将 / 和 - 转义为等效的 html 代码。

var str = 'Loremipsumdolorsitametconsectetura-dipisicingelitLaboredistinctionamdol-oresmodiamet/etblanditiisarchitectsundolorem/qnullobcaecatnobilibermollitia/sialiquiodiomagncommodi.';

const escaped = str.replace(/\//g, '&#47;').replace(/-/g, '&#45;');

【讨论】：

我避免使用JS 解决方案，因此我没有标记 JS，因为我在整个项目中都面临这个问题，并且 JS 会减慢 UI/UX。虽然我认为 JS 作为最后的选择。
我已经更新了纯 CSS 的解决方案，也可以在 mozilla 中使用。
第二个选项效果很好，让我们等待一些更好的答案，否则我会和你一起去。
@PiyushMarvaniya 具有讽刺意味的是，您在答案中使用了相同的属性，并说这个答案不起作用。
@AbhishekPandey - 我必须尝试“keep-all”但不能正常工作

【解决方案3】：

table {
  width: 100%;
}
table tr td {
    word-break: break-all;
}

<table>
  <tbody>
    <tr>
      <td>
        LoremipsumdolorsitametconsecteturadipisicingelitLaboredistinctionamdoloresmodiamet/etblanditiisarchitectsundolorem/qnullobcaecatnobilibermollitia/sialiquiodiomagncommodi.
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

你已经删除了所有的斜线，你已经删除了问题而不是解决它。

【解决方案4】：

只需将 word-break: keep-all; 添加到 CSS 中的 td 即可，对我有用

【讨论】：

【解决方案5】：

如果你的想法是完全不打破界限，那么你可以使用white-space: nowrap;。

【讨论】：