0

我在 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"）的样式，使其始终出现在侧边栏的中心，锚定在顶部，无论长度如何？

4

1 回答 1

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/

于 2014-12-07T19:05:50.187 回答