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

Question

我已经玩弄了2天，除了对齐感到沮丧之外，我意识到由于每个页面的标题宽度不同（并且因为文本从左到右，标题名越长，它就越向上增长到页眉区域），可能不可能实现这一点。另一个考虑因素是，这是用于WordPress网站的（虽然这并不重要）。

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

平面设计：

至今为止，我在CSS方面的进展如下：http://jsfiddle.net/vGFZP/

- KBarnes

---

http://snook.ca/archives/html_and_css/css-text-rotation - Jawad

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 */
}

- Jason Gennaro

---

我加了你的margin-top和padding-left :) 谢谢！ - KBarnes

好的，这段代码在我做的小例子上运行正常，但是现在它在我的WordPress CSS上表现不太一样。 http://www.startingpointstables.com/wp-content/themes/aSPS2010/A-Theme2.html （我添加了边框和背景颜色以便查看div的位置/内容）。它已经很接近了，有没有办法将“title”（Pony School）向左移动约5个像素？如果我使用绝对定位的Top：和Left：，则会从浏览器的角落定位（因此当浏览器调整大小时，标题保持在原位置），而相对定位根本不起作用。 - KBarnes

看起来不错 @KBarnes。你还需要帮助吗？ - Jason Gennaro

实际上是的...哈哈！所以我已经把所有东西都搞定了...除了一个令人讨厌的副作用。您无法访问（单击）旋转后的div“下面”中文本中的链接。 目瞪口呆的表情 http://www.startingpointstables.com/horse-boarding/ http://www.startingpointstables.com/category/kayes-blog/ - KBarnes

Answer 2

为了适应任何标题长度，请创建一个具有相同高度和宽度（例如960 x 960像素）的占位符。将此占位符放大以适应更长的标题。还要将文本对齐到右侧，然后它将浮动到页面顶部。

在此处查看演示： 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;
}

- user920041

---

好的，它在我手头的小例子上运行良好，但现在在我的WordPress CSS上表现不太正常 http://www.startingpointstables.com/wp-content/themes/aSPS2010/A-Theme2.html - KBarnes

抱歉，您的请求已经被取消。 - KBarnes

谢谢！这很棒。但是，如果您需要在内容div中单击或选择任何内容，则需要向标题div添加负z-index。 - Ed Booth

Answer 3

JavaScript可以为您完成这项任务。此外，jQuery还有.width()函数...但这不是一个好的方法...我会稍微尝试一下。

- NE555