私たちは、MS-Wordの表に行うことができますが、これまでのところ、私はのみ行うことができたように垂直方向に行くようにテキストをしようとしているTHISそれはだから箱が回転して、私は満足していないこれを... ... ISNが」実際の垂直方向のテキストを持つ方法はありますか？

デモでは回転を305度に設定するだけで、テキストが垂直になりません。270degでも、デモは回転を示すためだけに作成しました。

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

p { writing-mode: tb-rl; }

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

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

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！デモ。

更新：- 空白を表示する必要がある場合は、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！空白を含むデモ

アップデート2（2015年6月28日）

以来 white-space: pre;doesntのは（今のところ）のFirefoxの（この特定の使用のために）仕事に思えるだけにその行を変更

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デモFF互換。

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

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

また、display：blockに設定しないと、spanタグを回転できないようです。

Firefoxで文字が上下に配置されている縦書きテキストの場合：

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

使ってみてください：

writing-mode: lr-tb;

テキストを垂直（ボトムトップ）で表示するには、次のように使用します。

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ドキュメントをご覧ください。

私はこれで新しいです、それは私をたくさん助けました。幅、高さ、上、左を変更してフィットさせます。

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

あなたも行くことができます ここにて別の方法で確認ます。作者は次のようにします。

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

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

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 */
}

クラスを追加

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

}

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

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

私はこれでうまく解決できました：

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

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

以下は、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>

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

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

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

テキストの行が水平または垂直に配置されるかどうか、およびブロックが進行する方向を定義します。

ブラウザは適切にサポートされていますが、IE8では動作しません（IEに関心がある場合） http://caniuse.com/#feat=css-writing-mode

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

<!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>

次のような調整が必要な場合

S
T
A
R
T

その後に従ってください https：//www.w3.org/International/articles/vertical-text/#upright-latinをください。

例：

div.vertical-sentence{
  -ms-writing-mode: tb-rl; /* for IE */
  -webkit-writing-mode: vertical-rl; /* for Webkit */
  writing-mode: vertical-rl;
  
}
.rotate-characters-back-to-horizontal{ 
  -webkit-text-orientation: upright;  /* for Webkit */
  text-orientation: upright; 
}

<div class="vertical-sentence">
  <p><span class="rotate-characters-back-to-horizontal" lang="en">Whatever</span></p>
  <p><span class="rotate-characters-back-to-horizontal" lang="fr">Latin</span></p>
  <p><span class="rotate-characters-back-to-horizontal" lang="hi">वर्डप्रेस </span></p>
</div>

私の例ではヒンディー語にアクセントがあり、それが単一の文字としてレンダリングされることに注意してください。それが私がこのソリューションで直面した唯一の問題です。

developer.mozilla.orgから

text-orientation CSSプロパティは、行内のテキスト文字の向きを設定します。縦書きモードのテキストにのみ影響します（書き込みモードが横書きでない場合）。垂直スクリプトを使用する言語の表示を制御したり、垂直テーブルヘッダーを作成したりするのに役立ちます。

writing-mode: vertical-rl;
text-orientation: mixed;

ここですべての構文を確認することもできます

/* Keyword values */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

/* Global values */
text-orientation: inherit;
text-orientation: initial;
text-orientation: unset;

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

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

h1{word-break:break-all;display:block;width:40px;} 

こんにちは

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

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

私はCSS変換を試しましたが、transform-originで多くの問題がありました。最終的にはSVGファイルを使用することになりました。所要時間は10分程度で、CSSでも少し制御できました。

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

これも機能します：

transform: rotate(90deg);

このように試すことができます

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

これは少しハッキーですが、CSSを必要としないクロスブラウザーソリューションです。

<div>
  <div>h</div>
  <div>e</div>
  <div>l</div>
  <div>l</div>
  <div>o</div>
<div>