使用 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() 函数...但这不是一个好方法...我会玩一下。