css挑战时旋转（transform：rotate）block - width auto [英] css challenge when rotating (transform:rotate) block - width auto

问题描述

我遇到的问题在于：

旋转块位于40px垂直列内。这意味着在自动模式下旋转块的宽度不大于40像素。

为了更好地可视化这个问题，请检查这个小提琴我创建的： 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 
} 
  

我只需要这个文本衬垫。

解决方案

如果这是你想要的

a href =http://jsfiddle.net/Db68B/>小提示

这里的css只是添加的空白。它来自连续线。如果m缺少一些点，那么请清除

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

检查并告知我是否遗漏了某物

I've a little problem with block rotated 90 degrees using css transform.

Challenge lies in the following:

Rotated block is inside 40px vertical column. This means that width of the rotated block in auto mode is not more than 40px. So chunk of text is not placed on one continues line, instead line breaks appear.

To better visualise this problem please check this fiddle I created: 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
}

I simply need this text to be a one liner. Any ideas?

解决方案

If this is what you want

fiddle

Here's the css only added white space. It comes in continious line. If m missing some point then please clear

Here's the 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;
}

Check and let me know if I am missing some thing

这篇关于css挑战时旋转（transform：rotate）block - width auto的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！