Html 如何插入在换行时消失的大空间？

我正在开发一个网站，在那里我有一个中心标题，包含机场的名称和代码，在该机场的图片上方

我将机场的名称和代码用em空格隔开：

div.terminal-screept-container h3{
文本对齐：居中；
}
分段终端-轮廓-连接{
文本对齐：居中；
边缘顶部：5px；
边缘底部：40px；
}
部门终端-轮廓-预览{
最大宽度：500px；
填充：0；
保证金：0自动；
}
img.终端-轮廓-预览{
边框：1px纯色$彩色边框；
}

奥兰多（国际）和emsp；MCO
&米德多；

我建议更新H3标题的CSS，以防止溢出和包装，如下所示：

div.terminal-silhouette-container h3 {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

---

您可以将名称包装在一个范围内，并为其留出20像素的边距，然后在较小的屏幕上执行媒体查询以删除边距

span{
    margin-left: 20px;
}
@media screen and (max-width: 500px) {
    span{
        margin-left: 0;
    }
}

---

Thanx@Quantastical-应该是

隐藏的

。答案已更新。以上确实阻止了换行，但我确实希望它在必要时换行–我只是不希望em空间在换行时使文本偏离中心。Hm。它确实适用于这种特定情况。不过，仔细想想，这不仅仅是小屏幕上的问题（你的答案解决了这个问题）——如果我得到一个机场的名字特别长，我可能最终会在更大的屏幕上换行，换行的文本也会出现同样的间距问题。