我有一段文本，我想将其中的单词分组为对，这样两个单词就不会被破坏。有一个意想不到的结果，当你<span></span>连续有两个标签时，他整行都会变成现在的行。
例子：<div><span style="white-space: nowrap;">...</span><span style="white-space: nowrap;">...</span></div>
下面的代码是基线：结果将在任何" "（空格）或"-"容器具有的位置换行。（注意：此示例适用于响应式网页。）
<div class="block-of-text" style="max-width: 550px">
One-two Buckle-my-shoe, Three-four Shut-the-door,
Five-six Pick-up-sticks, Seven-eight Lay-them-straight,
Nine-ten Do-it-again.
</div>
基线的结果将如下所示。
|--------------- My Web Page ---------------| (550px)
| |
| One-two Buckle-my-shoe, Three-four Shut- |
| the-door, Five-six Pick-up-sticks, Seven-|
| eight Lay-them-straight, Nine-ten Do-it- |
| again. |
| |
|-------------------------------------------|
我想确保任何用连字符包围的单词都<span class="nowrap">...</span>保持在同一行。以下是我的尝试。（注意：我故意让 One-two 没有被 nowrap 包围，以显示它如何不包含在结果中。）
<style>
.nowrap {
white-space: nowrap;
}
</style> …我和我的团队在使用Google Chrome 时遇到了这个视觉故障。我已将视觉故障与其最简单的元素隔离开来。通过.html使用以下代码创建一个新文件并在 chrome 中打开它来重新创建故障。
我目前的谷歌浏览器（Version 78.0.3904.108 (Official Build) (64-bit)）上的MacOS Mojave Version 10.14.6作为Dec 02, 2019
<!doctype html>
<div
style="
position: fixed;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.3);
backdrop-filter: blur(5px);
"
>
</div>您应该会看到一个大部分为“灰色”的rgba(0,0,0,.3)页面，其中8px有transparent边距，top并且是left从<body>标签的默认 css添加的。
将鼠标悬停在 Google Chrome 上tabs bar，您会注意到一条模糊线的视觉故障。
假设：由于此.html文件的简约性质，我的团队认为它是 Chrome 浏览器中的“人工制品”，通常0px不可见。当backdrop-filterusingblur应用于 时，将position: fixed <div> …