使用CSS将页面标题文本旋转90度

Question

我已经玩弄了2天。除了对它排队感到沮丧之外 - 我意识到这可能是不可能的，因为每个页面的标题都是不同的'宽度'（并且因为文字从左到右，标题名称越长，它越长进入标题区域）。另一个考虑因素是，这是一个WordPress网站（并不是真的很重要）。

我找到了教程用于博客条目的“日期戳”，其中唯一被轮换的文本是4位数年份或2位数日期。

图形设计：

我到目前为止使用CSS：http://jsfiddle.net/vGFZP/

Answer 1

您只需要使用padding和margin

试试这个（例如#s）

.title {
    display: block;
    position: absolute;
    left: 5px;
    top: 35px;
    font-size: 50px;
    font-weight: bold;
    line-height: 45px;
    -webkit-transform: rotate(-90deg);
    margin-top: 100px;  /* ADD THIS */
}

.content {
    position: absolute;
    left: 50px;
    top: 20px;
    font-size: 13px;
    padding-left: 150px;  /* ADD THIS */
}

Answer 2

要适合任何标题长度，请制作具有相同高度和宽度的占位符（例如，960 x 960px）。使这个占位符大，以适应更长的标题。同时将文本对齐，然后它将浮动到页面顶部。

在此处查看演示： http://jsfiddle.net/4QFPJ/4/

.title {
   display:block;
   position:absolute;
   font-size:50px;
   font-weight:bold;
   line-height:45px;
   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);

   float: left;
   left:25px;
   top: 20px;
   height:960px;
   width: 960px;
   text-align: right;
}

Answer 3

JavaScript可以为您做到这一点。 jQuery也有.width（）函数......但这不是一个好方法......我会玩一点。