javascript - CSS中带有垂直文本的垂直标签

Question

我有一系列 .jpeg 菜单选项卡，其中包含垂直文本，并且垂直定向（高度 > 宽度）。尝试创建垂直选项卡，使它们从屏幕的顶部依次排列到底部，但是在阅读了一些文档之后，我仍然不确定从哪里开始。有小费吗？抱歉这个非常模糊的问题，但大多数搜索结果都假设您想要一个带有水平文本的垂直菜单。

Answer 1

您可以word-wrap: break-word;结合使用窄width值来强制您的文本为每个字母换行：http: //jsbin.com/ominus/1/edit

旋转会更好看，但这是另一种选择！

Answer 2

如果浏览器兼容性不是优先考虑的，您可以尝试使用 CSS3：

.rotated-text {
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg);   
    transform: rotate(-90deg);  
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Should work on IE9+ */
}

工作示例：http: //jsfiddle.net/C3qrT/

然后，您必须根据需要对齐文本。