文本在具有空格的元素之间没有正确换行：nowrap答案

【问题标题】：Text doesn't wrap properly between elements having white-space: nowrap文本在具有空格的元素之间没有正确换行：nowrap
【发布时间】：2023-03-24 09:40:01
【问题描述】：

如果我给一个元素 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（和闪烁）中的一个错误，对吗？有解决办法吗？

【问题讨论】：

文本被换行，正如您在小提琴和屏幕截图中看到的那样：第 3 个 span 被换行到下一行，然后第 5 个换行到新行。这似乎是 Chrome 包装方式中的一个错误，而不是根本不包装。似乎它没有正确计算元素的宽度。剪裁当然是由oveflow: hidden 声明引起的。

标签： css google-chrome webkit blink

【解决方案1】：

在相邻的 span 元素上添加 display: inline-block; 应该会有所帮助：

<span style='display: inline-block;'>

【讨论】：

【解决方案2】：

从今天开始（Chrome v42）这个错误不再是问题。 Chrome 已修复渲染错误，因此不再需要以下解决方法。

这里没什么可看的，继续前进。

有几种方法可以解决此错误。以下是三个选项：

CSS 技术

使用float: left。除了使其正确包装之外，这还会折叠跨度之间的空白，因此还要添加margin-right。

.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

【讨论】：

+1 表示零宽度空间。这对我很有用！谢谢gilly3！
首先提到最好的解决方案会很棒。
最佳解决方案主要取决于您生成 HTML 的方式。我总是更喜欢 CSS 解决方案，所以从我的角度来看，最好的解决方案首先被提及。如果您正在手动编码永远不会被解析或转换的 html 文件，我可以看到最后一个解决方案如何更适合您。

【解决方案3】：

try this:

.pairs {
width: 180px;
overflow: hidden;
}
.pairs > span {
display:block;
}

【讨论】：

我想你也想要那样。

【解决方案4】：

只需删除空白属性并使用自动换行。

在其工作下复制粘贴 css：

.pairs {
width: 180px;
overflow: hidden;
}

.pairs > span {
word-wrap:break-word;
}

【讨论】：

这不会使这些对保持在同一行。无论有没有word-wrap:break-word，它看起来都没有什么不同。