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代码，它发射到表之前。

UPDATE
找到了另一个在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, '-');

Answer 2

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

Answer 3

如果想法是不打破线，那么你可以使用white-space: nowrap; 。

Answer 4

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

 For / use / For - use – 

更多信息： https ： //www.ascii.cl/htmlcodes.htm

Answer 5

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

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