我使用css变换将块旋转90度时遇到了一些问题.
挑战在于以下几点：
旋转块位于40px垂直列内.这意味着在自动模式下旋转块的宽度不超过40px.因此,大量文本不会放在一个连续的行上,而是会出现换行符.
为了更好地显示这个问题,请检查我创建的小提琴：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
}
我只是需要这个文本是一个单行.有任何想法吗？
解决方法
如果这是你想要的
这里是css只添加了空格.它是连续的.如果我错过了一点,那么请清楚
这是css
#sidebar-small {
width: 40px;
height: 100%;
position: fixed;
left: 0;
top: 0;
}
#open_nav {
white-space:nowrap;
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: 20px;
}
检查并告诉我是否遗漏了一些东西
