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

问题描述

我有一个问题，使用css变换旋转90度块。

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

挑战在于以下：

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

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.

为了更好地可视化这个问题，请检查我创建的小提琴： http://jsfiddle.net/F7CEX/

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?

推荐答案

如果这是你想要的

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

fiddle

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

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

这里是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屋！