Question

我在sidescreen.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/

样式化动态填充的垂直文本

1 个答案: