html - 在 div 上以不同方式显示文本

Question

我有以下代码垂直显示文本。小提琴

    <div id="btn-toggle-menu">

         M
         e
         n
         u

    </div>

CSS：

    #btn-toggle-menu {
       top:0;
       left:0;
       width:20px;
       cursor:pointer;
       font-weight:bold;
       background-color:#ccc;
       text-align:center;
       white-space: pre;
    }

输出/输出：

我希望文本显示为指向所需菜单文本的文本。有人可以给我一个演示小提琴吗？

Answer 1

检查这个链接

css

#btn-toggle-menu {

    top:0;
    left:0;
    width:20px;
    height:500px;
    cursor:pointer;
    font-weight:bold;
    background-color:#ccc;
    text-align:center;
    white-space: pre;
    vertical-align:middle;
}
#inner-div
{
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform: rotate(-90deg);
    white-space:nowrap;
    margin-top:150px;
}

Answer 2

使用此类添加一个跨度（或更改 css 选择器），应该这样做

.textWrapper{
    background: #FFF;
    display: inline-block; /* inline doenst work, block seems to make it switch CC<->CCW */

    -moz-transform:rotate(90deg); /* FireFox*/
    -webkit-transform:rotate(90deg);  /* Safari and Chrome */
    -o-transform:rotate(90deg);  /* Opera */
    -ms-transform:rotate(90deg); /* IE9 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";   /* IE8 */
    transform: rotate(90deg);/* The way it should work: */
}

这可能会转向错误的方式，只需将其更改为 -90 或 270 度。请记住，IE8 对奇数（如 67）不太会做，坚持 45 度步长以避免我没有为 IE7 或更早版本添加代码，那些应该毫不留情地烧掉。

非常简单的小提琴：http: //jsfiddle.net/DqTe6/1/。这不会改善字体。您可能需要使用图像。通常我更喜欢文本而不是图像，但文本“菜单”没有任何 SEO 价值

Answer 3

<div id="btn-toggle-menu">
    <p class="text">Menu</p> 
</div>

.text
{
  -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
  -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
   filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);
/* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; 
}

小提琴：

http://jsfiddle.net/VmH5g/

Answer 4

试试这个，

HTML

<div class="bg">
    <div id="btn-toggle-menu">Menu</div>
</div>

CSS

#btn-toggle-menu {
    background-color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    height: 20px;
    left: -10px;
    position: absolute;
    text-align: center;
    top: 40%;
    width: 40px;
    /* white-space: pre;*/    /* Safari */
    -webkit-transform: rotate(-90deg);
   /* Firefox */
   -moz-transform: rotate(-90deg);
   /* IE */
   -ms-transform: rotate(-90deg);
   /* Opera */
   -o-transform: rotate(-90deg);
   /* Internet Explorer */
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.bg{background-color:#ccc;height:100px;width:20px;position:relative}

小提琴 http://jsfiddle.net/FWzAS/35/

参考http://css-tricks.com/snippets/css/text-rotation/

Answer 5

你的意思是这样吗？

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);

-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;

点击这里进行演示

Answer 6

现场演示

CSS在您的代码中使用 belo ：

-webkit-transform: rotate(-90deg);
-ff-transform: rotate(-90deg);
transform: rotate(-90deg);

Answer 7

给你.. @Martijn 答案的略微修改版本。

http://jsfiddle.net/SmtCS/

CSS

.textWrapper{
background: #FFF;
/* FireFox*/
-moz-transform:rotate(270deg);
/* Safari and Chrome */
-webkit-transform:rotate(270deg);
/* Opera */
-o-transform:rotate(270deg);
/* IE9 */
-ms-transform:rotate(270deg);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; 

}

HTML

<div id="btn-toggle-menu" class="btn textWrapper">M e n u </div>

Answer 8

试试 JS 小提琴

http://jsfiddle.net/jWJMn/

.element {
   -moz-transform: rotate(270deg);
   -webkit-transform: rotate(270deg) ;
   -o-transform: rotate(270deg) ;
   -ms-transform: rotate(270deg) ;
   transform: rotate(270deg);
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    background-color:yellow;
    height:50px;
    width:50px;

}