极客观点
项目管理
HarmonyOS
如何在 css 中旋转文本以获得以下输出：
你好，
编辑：
感谢您的快速建议。我在 jsfile 中添加了我的示例代码：
http://jsfiddle.net/koolkabin/yawYM/
HTML：
<div class="mainWrapper">
<div class="rotateObj">
<div class="title active">First Text Title</div>
<div class="content">
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
</div>
<div class="title">First Text Title</div>
<div class="content hide">
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
</div>
<div class="title">First Text Title</div>
<div class="content hide">
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
</div>
<div class="title">First Text Title</div>
<div class="content hide">
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
</div>
<div class="title">First Text Title</div>
<div class="content hide">
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
</div>
</div>
</div>
CSS：
.mainWrapper{margin:0 auto; width:960px; background:#EFEFEF;}
.rotateObj{position:relative; height:400px;}
.rotateObj .title{
float:left;
background:gray;
width:50px;
height:100%;
/** Rounded Border */
border-radius:5px;-moz-border-radius:5px;
/** Rotation */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform:rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.rotateObj .active{background:green;}
.rotateObj .content{float:left;width:600px;height:100%;padding:20px;}
.hide{display:none;}
我面临的问题是，当我们旋转文本时，它会破坏对齐和位置。那么是什么原因造成的，我该如何管理它们呢？
原文由 KoolKabin 发布，翻译遵循 CC BY-SA 4.0 许可协议
您需要使用 CSS3 转换属性
rotate- 请参阅此处 了解哪些浏览器支持它以及您需要使用的前缀。webkit 浏览器的一个例子是
-webkit-transform: rotate(-90deg);编辑： 问题发生了很大变化，所以我添加了一个适用于 Chrome/Safari 的 演示（因为我只包括了
-webkit-CSS 前缀规则）。您遇到的问题是您不想旋转 标题 div ，而只是旋转其中的文本。如果您删除旋转，则<div>处于正确位置，您需要做的就是将文本包装在一个元素中并旋转它。作为 jQuery UI 的一部分，已经存在一个更可定制的小部件 - 请参阅 手风琴 演示页面。我相信凭借一些 CSS 技巧，您应该能够使手风琴垂直并旋转标题文本 :-)
编辑 2： 我已经预料到文本中心问题并且已经 更新了我的演示。但是有一个高度/宽度限制，所以更长的文本仍然会破坏布局。
编辑 3：看起来水平版本是 原始计划 的一部分，但我在演示页面上看不到任何配置方式。我错了……新的手风琴是 即将到来 的 jQuery UI 1.9 的一部分！因此，如果您想要新功能，您可以尝试开发版本。
希望这可以帮助！