如何插入在换行符上消失的大空间？

I'm developing a website where I have a centered title containing the name and code of an airport above an image of that airport.

我正在开发一个网站，我的中心标题包含机场图像上方的机场名称和代码。

I have the name and code of the airport separated by an em space:

我有一个由em空间隔开的机场名称和代码：

div.terminal-silhouette-container h3 {
	text-align: center;
}

div.terminal-silhouette-links {
	text-align: center;
	margin-top: 5px;
	margin-bottom: 40px;
}

div.terminal-silhouette-preview {
	max-width: 500px;
	padding: 0;
	margin: 0 auto;
}

img.terminal-silhouette-preview {
	border: 1px solid $color-border;
}

<div class="col-lg-6 terminal-silhouette-container">
  <h3>Orlando (International)&emsp;MCO</h3>
	<div class="terminal-silhouette-preview">
      <a href="files/terminal-silhouettes/png/MCO.png">
        <img class="img-responsive terminal-silhouette-preview" src="/assets/projects/terminal-silhouettes/MCO.png" alt="MCO" />
      </a>
    </div>
  <div class="terminal-silhouette-links"><a href="files/terminal-silhouettes/png/MCO.png">png</a> &middot; <a href="files/terminal-silhouettes/svg/MCO.svg">svg</a></div>
</div>

This works exactly as I want on larger screens, but when I'm on a narrower mobile screen, the title wraps. Wrapping isn't a problem for me, but because of the em space, one of the lines ends up appearing off-center:

这在我的大屏幕上完全按照我想要的方式工作，但当我在一个较窄的手机屏幕上时，标题会包含。包装对我来说不是问题，但由于em空间，其中一条线最终出现在偏离中心的位置：

Is there a way in HTML or CSS to get the browser to treat the em space like a normal space – that is, ignore it (for centering text) if it's at the end of a line?

是否有一种方法可以让HTML或CSS让浏览器像普通空间一样对待em空间 - 也就是说，如果它位于一行的末尾，则忽略它（用于居中文本）？

2 个解决方案

#1

You can wrap the name in a span and give it margin left of lets say 20 px Then on smaller screens you can do do a media query to remove the margin.

您可以在一个范围中包装该名称并给它左边的边距让我们说20 px然后在较小的屏幕上你可以做一个媒体查询来删除边距。

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

#2

I suggest updating your CSS for the H3 titles to prevent overflow and wrapping like this:

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

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

#1