在Bootstrap中引入循環文本

Question

使用引導程序3，我在生成一行和div中心的旋轉文本時遇到了一些問題。你可以看看這個演示，並讓我知道爲什麼在#map一側的文字出現在3行？像：

，但我希望能有像

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"); 
 
#map{ 
 
    display: inline-block; 
 
    transform: rotate(-90deg); 
 

 
    color: #ed217c; 
 
}

<div class="container"> 
 
<div class="row"> 
 
    <div class="col-xs-1"><span id="map">Here is Starter Plan</span></div> 
 
    <div class="col-xs-11" style="background:red;min-height:400px;">Rest Of Content</div> 
 
</div> 
 
</div>

Answer 1

只需使用translate得到它的正確定位和使用white-space: nowrap;有沒有線路突破。

#map { 
    display: inline-block; 
    transform: rotate(-90deg) translate(-100px, -30px); 
    color: #ed217c; 
    white-space: nowrap; 
}