How can I insert a large space that disappears when a line breaks?

Question

I am developing a website on which I have a central name containing the name and airport code above the image of this airport.

I have an airport name and code, separated by a space:

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>

Run codeHide result

This works exactly the way I want it on larger screens, but when I'm on a narrower mobile screen, the title lights up. The wrapper is not a problem for me, but because of the em space one of the lines ends leaving the center:

Is there a way in HTML or CSS to make the browser treat the em space as normal space, i.e. ignore it (to center the text) if it is at the end of the line?

Answer 1

CSS H3, :

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

Answer 2

let say 20 px. - .

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