时间戳

首页 > 解决方案 > CSS white-space: normal 在 Firefox 中因同级 span 元素而失败

html - CSS white-space: normal 在 Firefox 中因同级 span 元素而失败

问题描述

我在尝试将换行限制在行上的特定位置时遇到了一个问题。我知道还有其他方法可以做到这一点，但对我来说最简单的方法（使用我生成的 HTML）是将所有内容设置为white-space: nowrap并在某些时候用white-space: normal. 在 Firefox 中，这在某些位置失败了，似乎只在其他跨度旁边。在 Chrome 中它工作正常。

Firefox 中的问题示例：

p {
    background: red;
    width: 40em;
    white-space: nowrap;
}
.allow-break {
    white-space: normal;
}
<h3>With sibling span:</h3>
<p>
    Distinctio labore et unde veniam.
    Autem aut dolorum numquam ipsam. Amet impedit omnis
    <span class="allow-break"> </span>
    <span>span</span>
    quibusdam qui. Quo nemo qui nihil.
</p>
<h3>Without sibling span:</h3>
<p>
    Distinctio labore et unde veniam.
    Autem aut dolorum numquam ipsam. Amet impedit omnis
    <span class="allow-break"> </span>
    span
    quibusdam qui. Quo nemo qui nihil.
</p>

这是 Firefox 中的错误，还是我不知道的一些歧义？似乎没有样式的span应该有任何区别。

标签： htmlcssfirefoxword-wrap

解决方案

推荐阅读