css – 文本在具有空格的元素之间没有正确包装：nowrap

2023年3月25日 124次阅读

如果我给一个元素white-space：nowrap的所有子元素,那么在webkit中应该放置的元素之间的空白区域(并且闪烁)：

jsfiddle.net/VJyn2

.pairs {
    width: 180px;
    overflow: hidden;
}
.pairs > span {
    white-space: nowrap;
}

<div class="pairs">
    <span>
        <strong>bread:</strong>
        <em>crust</em>
    </span>
    <span>
        <strong>watermelon:</strong>
        <em>rind</em>
    </span>
    ...
</div>

CSS的目的是将单词对保持在一起,但允许文本在< span>之间中断.元素.这在IE和FireFox中按预期工作.

但是,在基于Webkit的浏览器(safari,chrome,opera)中,而不是将太长的跨度推到下一行,跨度会被剪裁.

这是webkit中的一个错误(并且闪烁),对吧？有解决方法吗？

最佳答案 截至今天(Chrome v42),此错误不再是问题. Chrome修复了渲染错误,因此不再需要以下解决方法.

这里没什么好看的,离开.

有几种方法可以解决这个bug.这有三个选项：

CSS技术

使用float：left.除了使其正确包裹外,这也会折叠跨距之间的空白,因此也要添加边距.

.pairs > span {
    white-space: nowrap;
    float: left;
    margin-right: 0.5em;
}

jsfiddle.net/VJyn2/3

HTML技术

在每个< span>之间添加zero-width space(U 200b)：

<div class="pairs">
    <span>
        <strong>bread:</strong>
        <em>crust</em>
    </span>
    &#x200b;
    <span>
        <strong>watermelon:</strong>
        <em>rind</em>
    </span>
    &#x200b;
    <span>
        <strong>banana:</strong>
        <em>peel</em>
    </span>
    ...
</div>

jsfiddle.net/VJyn2/2

更好的HTML技术

事实证明,要使其正常工作所需的一切就是将span元素放在HTML中的同一行：

<div class="pairs">
    <span><strong>bread:</strong> <em>crust</em></span>
    <span><strong>watermelon:</strong> <em>rind</em></span>
    <span><strong>banana:</strong> <em>peel</em></span>
    ...
</div>

jsfiddle.net/VJyn2/7

点赞