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上的宽度并且一切正常：http://jsfiddle.net/8Vkmm/1/

  /*width: 35px;*/

Answer 2

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

http://jsfiddle.net/9ZJJz/

Answer 3

您需要以下CSS：

#followTab { white-space: nowrap; }