html - Firefox 将单词从斜线断开

Question

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

/带有和的示例-

table {
  width: 100%;
}

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

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

---

/没有and 的例子-

table {
  width: 100%;
}

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

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

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

请在 Firefox 中打开它。

标签： htmlcssfirefoxcross-browser

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 Snippet，它转义/到-其等效的 html 代码。

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

const escaped = str.replace(/\//g, '/').replace(/-/g, '-');