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

Question

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

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

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

Answer 1

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

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

Answer 2

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

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