web-dev-qa-db-ja.com

縦書きテキストの方向

私はms-Wordテーブルでできるようにテキストを垂直方向に行こうとしましたが、これまでのところできました THIS ...これは私が満足していないためです回転したボックスです...実際の垂直方向のテキストを表示する方法はありませんか？

テキストを垂直にしないデモでは、回転を305度に設定するだけです。 270degは、ローテーションを示すデモのみを作成します。

htmlcsstextvertical-alignment
87
Moon

代替アプローチ： http://www.thecssninja.com/css/real-text-rotation-with-css

p { writing-mode: tb-rl; }
95
swan
-webkit-transform: rotate(90deg);

他の答えは正しいが、いくつかのアライメントの問題につながった。さまざまなことを試してみると、このCSSピースのコードは完璧に機能しました。

.vertical{
    writing-mode:tb-rl;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform:rotate(90deg);
    transform: rotate(90deg);
    white-space:nowrap;
    display:block;
    bottom:0;
    width:20px;
    height:20px;
}
76
Amit

以下に示すように、HTMLで回転したテキストではなく、実際の垂直テキストを検索していました。だから私は次の方法を使用してそれを達成することができました。

enter image description here HTML：-

<p class="vericaltext">
Hi This is Vertical Text!
</p>

CSS：-

.vericaltext{
    width:1px;
    Word-wrap: break-Word;
    font-family: monospace; /* this is just for good looks */
}

JSFiddle！Demo。

更新：-whitespacesを表示する必要がある場合は、追加します次のプロパティをcssに追加します。

white-space: pre;

したがって、cssクラスは

.vericaltext{
    width:1px;
    Word-wrap: break-Word;
    font-family: monospace; /* this is just for good looks */
    white-space: pre;/* this is for displaying whitespaces */
}

JSFiddle！空白付きデモ

Update 2（28-JUN-2015）

Firefoxでwhite-space: pre;は（この特定の用途では）動作しないようです（現時点では）ので、その行を

white-space: pre-wrap;

したがって、cssクラスは

.vericaltext{
    width:1px;
    Word-wrap: break-Word;
    font-family: monospace; /* this is just for good looks */
    white-space:pre-wrap; /* this is for displaying whitespaces including Moz-FF.*/
}

JsFiddle Demo FF Compatible。

58
Mohd Abdul Mujib

テキストを90度回転するには：

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

また、display：blockに設定せずにspanタグを回転させることはできないようです。

25
Jbrown

Firefoxで文字が上下に並ぶ縦書きテキストの場合：

text-orientation: upright;
writing-mode: vertical-rl;
9
Iggy

使用してみてください：

writing-mode: lr-tb;
7
Mladen Janjetovic

私はこれが初めてなので、とても助かりました。幅、高さ、上部、および左側を変更して、収まるようにします。

.vertical-text {
display: block;
position:absolute;
width: 0px;
height: 0px;
top: 0px;
left: 0px;
transform: rotate(90deg);
}

here に移動して、別の方法を確認することもできます。作成者は次のようにします。

.vertical-text {
transform: rotate(90deg);
transform-Origin: left top 0;
float: left;
}
3
NICK

クラスを追加する

.rotate {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);

}

私はこれをほぼ毎日使用しており、何の問題もありません。

https://css-tricks.com/snippets/css/text-rotation/

2
MrJoshFisher

CSS3 Transformプロパティを使用できます

.txtdiv{
  transform:rotate(7deg);
  -ms-transform:rotate(7deg); /* IE 9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')"; /* IE6-8 */
  -webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
}
2
Sadee

テキストを縦（下）に表示するには、次のように使用できます。

writing-mode: vertical-lr; 

transform: rotate(180deg);

#myDiv{
text-align: center;
}

#mySpan{
writing-mode: vertical-lr; 
transform: rotate(180deg);
}
<div id="myDiv"> 

<span id="mySpan"> Here We gooooo !!! </span>

</div>

ブラウザの互換性を確保するためにこれを追加できることに注意してください。

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

writing-modeプロパティの詳細については、こちらをご覧ください Mozilla docs。

2
Abdallah Okasha
#myDiv{
text-align: center;
}

#mySpan{
writing-mode: vertical-lr; 
transform: rotate(180deg);
}
<div id="myDiv"> 

<span id="mySpan"> Here We gooooo !!! </span>

</div>

enter image description here

2
vishal singh

回転は、あなたがしたように、行く方法です-しかし、すべてのブラウザがそれをサポートしているわけではないことに注意してください。クロスブラウザソリューションを取得するには、そのための画像を生成する必要があります。

2
oezi

以下は、3行の垂直テキストをテーブルの列見出しに入れるために使用したSVGコードの例です。他の角度は少し調整することで可能です。最近ではほとんどのブラウザがSVGをサポートしていると思います。

<svg height="150" width="40">
  <text font-weight="bold" x="-150" y="10" transform="rotate(-90 0 0)">Jane Doe</text>
  <text x="-150" y="25" transform="rotate(-90 0 0)">0/0&nbsp;&nbsp;&nbsp;&nbsp;0/0</text>
  <text x="-150" y="40" transform="rotate(-90 0 0)">2015-06-06</text>
  Sorry, your browser does not support inline SVG.
</svg>
2
Neil Bauers

最善の解決策は、writing-modewriting-mode: vertical-rl;を使用することです https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

テキストの行を水平または垂直にレイアウトするかどうか、およびブロックの進行方向を定義します。

ブラウザのサポートは良好ですが、IE8では動作しません（IEを気にする場合） http://caniuse.com/#feat=css-writing-mode

1
Vasil Enchev

これも機能します：

transform: rotate(90deg);
1
fresh5447

私はこれで実用的なソリューションを持っています：

（middleItemクラスdiv内にタイトルがあります）

.middleItem > .title{
    width: 5px;
    height: auto;
    Word-break:break-all;
    font-size: 150%;
}
1
RVA

以下のCSSプロパティでも同じことができます。

writing-mode: vertical-rl;
text-orientation: upright;
0
Rajitha Alluri

SVGファイルを使用してみてください。ブラウザの互換性が向上しているようで、レスポンシブデザインを壊すことはありません。

CSS変換を試してみましたが、transform-Originに問題がありました。そして、SVGファイルで行くことになりました。 10分ほどかかりましたが、CSSでも少し制御できました。

Adobe Illustratorがない場合は、Inkscapeを使用してSVGを作成できます。

0
b01
.vertical-text {
    transform: rotate(90deg);
    transform-Origin: left top 0;
    float: left;
}
0
JIYAUL MUSTAPHA
<!DOCTYPE html>
<html>
    <style>
        h2 {
           margin: 0 0 0 0;
           transform: rotate(270deg);
           transform-Origin: top left;
           color: #852c98;
           position: absolute;
           top: 200px;
        }
    </style>
    <body>
        <h2>It’s all in the curd</h2>
    </body>
</html>
0
sachin burnawal

あなたはこのように試すことができます

-webkit-transform: rotate(270deg);   
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
0
Bablu Ahmed

Word-wrap：break-Wordを使用して、次のスニペットに従って垂直テキストを使用できます。

HTML：

<div class='verticalText mydiv'>Here is your text</div>

css：

.verticalText {
Word-wrap: break-Word;
  font-size: 18px;
}
.mydiv {
  height: 300px;
  width: 10px;
}
0
Hari Prasandh
<style>
    #text_orientation{
        writing-mode:tb-rl;
        transform: rotate(90deg);
        white-space:nowrap;
        display:block;
        bottom:0;
        width:20px;
        height:20px;
    }
</style>
</head>
<body>

<p id="text_orientation">Welcome</p>
</body>
0
Ayyappa
h1{Word-break:break-all;display:block;width:40px;}

こんにちは

注：ブラウザのサポート-IE browser（8,9,10,11）-Firefox browser（38,39,40,41,42,43,44）-Chromeブラウザー（44,45,46,47,48）-Safariブラウザー（8,9）-Operaブラウザー（サポートされていません）-Androidブラウザー（44）

0
Salehin