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;
    }

O/P:

必須のメニューテキストを指すようなテキストを表示したい。誰かが私にデモフィドルをくれますか?

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 など) ではあまり機能しないことに注意してください。IE7 以前のコードを追加しなかったことを避けるために 45 度のステップに固執してください。

非常に単純なフィドル: 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

ライブデモ

コードでbelo を使用CSSします。

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

Answer 6

どうぞ.. @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 7

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;

}

Answer 8

こんな感じですか？

-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%;

デモはここをクリック