html中的旋转变化,旋转(变换：旋转)块时的html – css挑战 – 宽度自动

我使用css变换将块旋转90度时遇到了一些问题.

挑战在于以下几点：

旋转块位于40px垂直列内.这意味着在自动模式下旋转块的宽度不超过40px.因此,大量文本不会放在一个连续的行上,而是会出现换行符.

#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

}

我只是需要这个文本是一个单行.有任何想法吗？