私はms-Wordテーブルでできるようにテキストを垂直方向に行こうとしましたが、これまでのところできました THIS ...これは私が満足していないためです回転したボックスです...実際の垂直方向のテキストを表示する方法はありませんか?
テキストを垂直にしないデモでは、回転を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 */
}
更新:-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 */
}
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.*/
}
テキストを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;
私はこれが初めてなので、とても助かりました。幅、高さ、上部、および左側を変更して、収まるようにします。
.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;
}
クラスを追加する
.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
私はこれをほぼ毎日使用しており、何の問題もありません。
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 */
}
テキストを縦(下)に表示するには、次のように使用できます。
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。
#myDiv{
text-align: center;
}
#mySpan{
writing-mode: vertical-lr;
transform: rotate(180deg);
}
<div id="myDiv">
<span id="mySpan"> Here We gooooo !!! </span>
</div>
回転は、あなたがしたように、行く方法です-しかし、すべてのブラウザがそれをサポートしているわけではないことに注意してください。クロスブラウザソリューションを取得するには、そのための画像を生成する必要があります。
以下は、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 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>
最善の解決策は、writing-mode
writing-mode: vertical-rl;
を使用することです https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
テキストの行を水平または垂直にレイアウトするかどうか、およびブロックの進行方向を定義します。
ブラウザのサポートは良好ですが、IE8では動作しません(IEを気にする場合) http://caniuse.com/#feat=css-writing-mode
これも機能します:
transform: rotate(90deg);
私はこれで実用的なソリューションを持っています:
(middleItemクラスdiv内にタイトルがあります)
.middleItem > .title{
width: 5px;
height: auto;
Word-break:break-all;
font-size: 150%;
}
以下のCSSプロパティでも同じことができます。
writing-mode: vertical-rl;
text-orientation: upright;
SVGファイルを使用してみてください。ブラウザの互換性が向上しているようで、レスポンシブデザインを壊すことはありません。
CSS変換を試してみましたが、transform-Originに問題がありました。そして、SVGファイルで行くことになりました。 10分ほどかかりましたが、CSSでも少し制御できました。
Adobe Illustratorがない場合は、Inkscapeを使用してSVGを作成できます。
.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>
あなたはこのように試すことができます
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
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 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)