ホームページ  >  記事  >  ウェブフロントエンド  >  CSSでdivテキストを縦書きにする方法

CSSでdivテキストを縦書きにする方法

藏色散人
藏色散人オリジナル
2021-02-23 14:59:306161ブラウズ

CSS で div テキストを縦書きにする方法: 最初に HTML サンプル ファイルを作成し、次に div を作成し、最後に CSS スタイルを "div{writing-mode: tb-rl;}" に設定します。 div テキストは縦書きです。

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

レンダリング:

CSSでdivテキストを縦書きにする方法

##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でdivテキストを縦書きにする方法

推奨: 「

css ビデオ チュートリアル

以上がCSSでdivテキストを縦書きにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。