html - Firefox 从斜杠中打破单词

Question

为什么 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 位)。

请在 Firefox 中打开它。

Answer 1

看起来 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, '/').replace(/-/g, '-');