CSS - 垂直製表符中的文本分隔線

Question

我有旋轉90度的文字，它位於處於固定位置的垂直製表符中。該標籤用於聯繫我們鏈接。我無法解決的問題是文本斷行。它看起來像這樣。

聯繫 我們

我試圖文本對齊，垂直對齊，顯示，具有邊距和填充，和寬度搞亂。似乎沒有任何工作。其他人遇到過這個問題嗎？你怎麼能解決它？下面的代碼。

CSS

#followTab { 
     list-style: none; 
     position: fixed; 
     text-indent:initial; 
     z-index: 1; 
     right: 0; 
     top: 130px; 
     line-height:20px; 
     width: 35px; 
     padding: 80px 10px; 
     border: 3px solid #fff; 
     border-right: none; 
     -moz-border-radius: 10px 0 0 10px; 
     -webkit-border-radius: 10px 0 0 10px; 
     border-radius: 10px 0 0 10px; 
     -moz-box-shadow: 0 0 7px rgba(0, 0, 0, .6); 
     -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, .6); 
     box-shadow: 0 0 7px rgba(0, 0, 0, .6); 
     background: rgba(239, 91, 10, .75); 
     background: -moz-linear-gradient(top, rgba(243, 52, 8, .75), rgba(239, 91, 10, .75)); 
     background: -webkit-gradient(linear, left top, left bottom, from(rgba(243, 52, 8, .75)), to(rgba(239, 91, 10, .75))); 
     background: linear-gradient(top, rgba(243, 52, 8, .75), rgba(239, 91, 10, .75)); 
     filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#c0f33408', endColorStr='#c0ef5b0a', GradientType=0); 
    } 

    .rotate { 
     -webkit-transform: rotate(90deg); 
     -moz-transform: rotate(90deg); 
     -ms-transform: rotate(90deg); 
     -o-transform: rotate(90deg); 
     transform: rotate(-90deg); 
     /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */ 
     -webkit-transform-origin: 50% 50%; 
     -moz-transform-origin: 50% 50%; 
     -ms-transform-origin: 50% 50%; 
     -o-transform-origin: 50% 50%; 
     transform-origin: 50% 50%; 
     /* Should be unset in IE9+ I think. */ 
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
    } 

HTML

<ul id="followTab"> 
    <li class="rotate"><a>Contact Us</a></li> 
</ul> 

http://jsfiddle.net/8Vkmm/

Answer 1

<ul id="followTab"> 
    <li class="rotate"><a>Contact&nbsp;Us</a></li> 
</ul> 

http://jsfiddle.net/9ZJJz/

Answer 2

正如克里斯說，寬鬆的UL寬度和它的所有作品：http://jsfiddle.net/8Vkmm/1/

/*width: 35px;*/ 

Answer 3

您需要以下CSS：

#followTab { white-space: nowrap; }