改行時に消える大きなスペースを挿入するにはどうすればよいですか？

Question

私は、その空港のイメージの上にある空港の名前とコードを含む中心のタイトルを持つウェブサイトを開発しています。

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

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

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

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

<div class="col-lg-6 terminal-silhouette-container"> 
 
    <h3>Orlando (International)&emsp;MCO</h3> 
 
\t <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>

これは私が大画面にしたいと正確に動作しますが、私を：

私は全角スペースで区切って、空港の名前やコードを持っています狭いモバイル画面では、タイトルが折り返されます。ラッピングは、私にとっては問題ではありませんが、理由は全角スペースで、ラインの一つは、中心から外れて表示されて終わる：

を治療するためのブラウザを得るためにHTMLやCSSの方法があります通常のスペースのようなem空間です。つまり、行の終わりにあれば無視します（テキストをセンタリングするために）？私はこのようなオーバーフローやラッピング防ぐために、H3のタイトルのためにあなたのCSSを更新示唆

Answer 1

：あなたはスパンで名前をラップして与えることができます

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

Answer 2

は、それの左マージンは、小さな画面上で次に20ピクセルを言うことができますマージンを削除するメディアクエリを行うことができます。

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