为什么 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 中打开它。
最佳答案
看起来 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, '-');
关于html - Firefox 从斜杠中打破单词,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56361776/