ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSでdivテキストを縦書きにする方法
CSS で div テキストを縦書きにする方法: 最初に HTML サンプル ファイルを作成し、次に div を作成し、最後に CSS スタイルを "div{writing-mode: tb-rl;}" に設定します。 div テキストは縦書きです。
この記事の動作環境: Windows7 システム、HTML5&&CSS3、Dell G3 コンピューター。
CSS でテキストを縦方向に配置する設定方法:
1. 書き込みモード (オブジェクトの書き込み方向の設定)
構文: 書き込みモード: lr-tb、tb-rl
パラメータ: lr-tb: 左から右、上から下 tb-rl: 上から下、右から左
例:
css コード:
div { writing-mode: tb-rl; }
例:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>竖列排版实例</title> <style> div { writing-mode: tb-rl; } </style> </head> <body> <div>我是竖列排版</div> </body> </html>
レンダリング:
##2. 一般的なレイアウトのアイデア: 幅の設定テキスト オブジェクトの配置できるのは、次のテキストの幅の距離だけです。テキストが 1 行に 2 文字収まらない場合、テキストは自動的に折り返されるため、縦組版が必要になります。<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>竖列排版实例</title> <style> body{text-align:center} .shuli{ margin:0 auto;width:20px;line-height:24px;border:1px solid #333} </style> </head> <body> <div class="shuli">我是竖列排版</div> </body> </html>レンダリング: 推奨: 「
css ビデオ チュートリアル 」
以上がCSSでdivテキストを縦書きにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。