css - 动态填充的垂直文本样式

Question

我在 fullscreen.js 旁边使用侧边栏，它检测哪个部分当前处于事件状态/正在查看，并显示标题沿垂直轴旋转 90 度。

因为文本是动态的，所以长度是变化的。当文本旋转时，这会导致样式出现问题:文本越长，它看起来离左边距越远，溢出边界。

如果您使用鼠标滚轮在此示例中向下移动几个部分，您将看到发生了什么: http://jsfiddle.net/pLjrbcL7/2/

我用来设置此元素样式的一些 CSS 位于此处:

.vertical-text {
 -ms-transform: rotate(270deg);
 -moz-transform: rotate(270deg);
 -webkit-transform: rotate(270deg);
 transform: rotate(270deg);
 font-family:'Raleway', sans-serif;
 float: left;
 font-weight: 300;
 font-size:12px;
 }

 #titleposition {
 position: absolute;
 top: 160px;
 left:5px;
 white-space: nowrap;
 }

我使用 white-space:nowrap 强制所有文本显示在一行上。

我如何设置此跨度 (id="collapsedsectiontitle") 的样式，使其始终出现在侧边栏的中央，固定在顶部，而不管长度如何？

Answer 1

添加到“#titleposition”top: 200px;(或与“#menuarrow”的其他距离以防止位置冲突)。还给它 left :50%; 将它放在“#undermenu”的中间。也给 '.vertical-text' position: absolute; 并将 float: left; 替换为 width: 100%;。对于您要求使“#titleposition”的文本从右侧开始的请求，给它 direction: rtl;，所以我们有:

#titleposition
{
    position: absolute;
    top: 200px;
    left:50%;
    white-space: nowrap;
    direction: rtl;
}

.vertical-text
{
    -ms-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    font-family:'Raleway', sans-serif;
    position: absolute;
    width: 100%;
    font-weight: 300;
    font-size:12px;
}

新结果:http://jsfiddle.net/pLjrbcL7/4/