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

概述我使用css变换将块旋转90度时遇到了一些问题. 挑战在于以下几点： 旋转块位于40px垂直列内.这意味着在自动模式下旋转块的宽度不超过40px.因此,大量文本不会放在一个连续的行上,而是会出现换行符. 为了更好地显示这个问题,请检查我创建的小提琴：http://jsfiddle.net/F7CEX/ #open_nav { font-family: 'Exo', sans-serif; 我使用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}

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

解决方法 如果这是你想要的

fiddle

这里是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;}

检查并告诉我是否遗漏了一些东西

总结

以上是内存溢出为你收集整理的旋转(变换：旋转)块时的html – css挑战 – 宽度自动全部内容，希望文章能够帮你解决旋转(变换：旋转)块时的html – css挑战 – 宽度自动所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。