我在使用CSS变换将一个块旋转90度时遇到了一点问题。
问题在于如下:
旋转的块位于40px的垂直列内。这意味着自动模式下旋转块的宽度不超过40px。因此,文本块不会放置在一条连续线上,而是出现了换行符。
为了更好地可视化这个问题,请查看我创建的这个fiddle: http://jsfiddle.net/F7CEX/
#open_nav {
font-family: 'Exo', sans-serif;
font-weight: 300;
font-size: 1em;
display: block;
color: #333333;
text-decoration: none;
background: url("img/menu-s.png") no-repeat 18px -30px transparent;
padding-left: 50px;
padding-right: 19px;
line-height: 40px;
position: absolute;
bottom: 18px;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: 20px;
-moz-transform: rotate(-90deg);
-moz-transform-origin: 20px;
-ms-transform: rotate(-90deg);
-ms-transform-origin: 20px;
-o-transform: rotate(-90deg);
-o-transform-origin: 20px;
transform: rotate(-90deg);
transform-origin
}
我只需要这段文本成为一行。有任何想法吗?
white-space:nowrap
强制内容为一行,而bottom: ...px
帮助我调整起始点,最后transform-origin
帮助我调整开始转换的位置。 - Mycodingproject