ホームページ > 記事 > ウェブフロントエンド > CSSで縦書きテキストを設定する方法
CSSで縦書きテキストを設定する方法
- 藏色散人オリジナル
- 2021-05-27 11:03:1213099ブラウズ
CSS で縦書きテキストを設定する方法: 1. "word-wrap:break-word;" などの属性で単一の縦書きテキストを実現します; 2. "writing-mode: tb-" などの属性で実現しますlr" 複数行の縦書きテキスト; 3. 全体的に縦方向のレイアウトを実現するには、"rotate(90deg);" を使用します。
この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター
CSS を使用して縦書きテキスト レイアウトを実現するいくつかの簡単な方法
以下では、Css を使用して縦書きテキスト レイアウトを実現するいくつかの方法を紹介します:
1. 文
の縦方向の配置を図に示します:
<!DOCTYPE html> <html> <head>
<title>test</title>
<meta charset="UTF-8"> </head> <style> .one {
width: 20px;
margin: 0 auto;
line-height: 24px;
font-size: 20px;}.two {
width: 15px;
margin: 0 auto;
line-height: 24px;
font-size: 20px;
word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/ } </style> <body>
<p class="one">我是竖列排版</p>
<p class="two">I AM ENGLISH</p> </body> </html>
2. 複数の文を縦に並べたもの (古代の詩など)
次のように:
<!DOCTYPE html> <html> <head>
<title>test</title>
<meta charset="UTF-8"> </head> <style> .one {
margin: 0 auto;
height: 140px;
writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/
writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/ } </style> <body>
<p class="one">欲话毗陵君反袂，欲言夏口我沾衣。谁知临老相逢日，悲叹声多语笑稀。</p>
<p class="one">I AM ENGLISH</p></body> </html>
3 。図に示すように、フォントは水平で、全体のレイアウトは垂直です。
##
<!DOCTYPE html><html><head>
<title>test</title>
<meta charset="UTF-8"></head><style>.one {
margin: 150px auto;
width: 200px;
font-size: 20px;
line-height: 24px;
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
-o-transform:rotate(90deg); /* Opera */}</style><body>
<p class="one">欲话毗陵君反袂</p>
<p class="one">ENGLISH</p></body></html> 推奨される調査: 「css ビデオ チュートリアル 
」
以上がCSSで縦書きテキストを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML投稿が文字化けした場合の対処法次の記事：HTML投稿が文字化けした場合の対処法