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-bit)。

请在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, '-');

Answer 2

您可能要尝试使用HTML代码来编写正斜杠和破折号。

For / use /
For - use –

此处有更多信息：https://www.ascii.cl/htmlcodes.htm

Answer 3

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

Answer 4

如果您的想法是完全不中断，那么您可以使用white-space: nowrap;。

Answer 5

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

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