CSSテキストを縦方向に表示するにはどうすればよいですか? CSSテキストを縦に表示する方法-CSSチュートリアル-php.cn

CSSテキストを縦方向に表示するにはどうすればよいですか? CSSテキストを縦に表示する方法

不言

リリース： 2018-09-18 14:07:48

オリジナル

25051 人が閲覧しました

特殊な要件により、Web ページ内のテキストを横方向に表示できない場合があります。この場合、必要なのは、テキストを縦方向に表示することです。Web ページ内のテキストを縦方向に表示するにはどうすればよいでしょうか。 次の記事では、縦書き表示を実現するcss方法を紹介します。

CSS テキストを縦方向に表示する方法 1:

writing-mode 属性を使用する

構文: writing-mode:lr-tb または writing- mode:tb-rl

パラメータ: lr-tb: 左から右、上から下; tb-rl: 上から下、右から左。

<!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>  
    <div class="one">十轮霜影转庭梧，此夕羁人独向隅。
未必素娥无怅恨，玉蟾清冷桂花孤。 </div>  
</body>  
</html>

ログイン後にコピー

CSS テキストの垂直表示効果は次のとおりです:

CSSテキストを縦方向に表示するにはどうすればよいですか? CSSテキストを縦に表示する方法

この方法は互換性が低く、IE でのみ使用できます。ブラウザのみサポートされているため、ここでは紹介しません。詳しく知りたい場合は、css オンラインマニュアルを参照してください。

CSSテキストを縦方向に表示する方法2:

テキストオブジェクトの幅を設定して、テキストが収まらないように次のテキストのみが配置されるようにする1 行に 2 文字テキストを折り返すと、自動的に縦書き組版が必要になります。

<!DOCTYPE html>  
<html>  
<head>  
    <title>test</title>  
    <meta charset="UTF-8">  
</head>  
<style>  
.one {  
    width: 52px;  
    margin: 0 auto;  
    line-height: 56px;  
    font-size: 50px;
} 
</style>  
<body>  
    <div class="one">中秋月</div>  
</body>  
</html>

ログイン後にコピー

注: word-wrap: Break-word;/*行を自動的に折り返すには、この文を英語で追加する必要があります*/

手順: テキスト DIV の幅を小さく設定して、1 行に 1 つのテキストのみを配置できるようにします。これにより、テキストが自動的に折り返されて垂直列レイアウトが実現されます。

css縦書きテキスト表示の効果は次のとおりです:

CSSテキストを縦方向に表示するにはどうすればよいですか? CSSテキストを縦に表示する方法

css 縦書きテキスト表示方法 3:

この方法は互換性が高く、コードも簡単だと思います。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
h1 { width: 50px; font-size: 50px;letter-spacing: 20px; } 
</style> 
</head> 
<body> 
<h1>中秋月</h1>
</body> 
</html>

ログイン後にコピー

css テキストの縦書き表示の効果は次のとおりです。

CSSテキストを縦方向に表示するにはどうすればよいですか? CSSテキストを縦に表示する方法

Css テキストの縦書き表示方法 4:

br を使用して折り返すテキストは縦に縦に表示されます

は、html br 改行タグを使用してテキストの行折り返しを実現し、各テキストの後に改行 br タグを追加して、縦の列に配置できるようにします。

    <!DOCTYPE html> 
    <html> 
    <head> 
    <style> 
    body{text-align:center; line-height:60px;font-size:30px} 
    /* CSS注释说明：设置css文字居中，css行高为22px间隔 */ 
    </style> 
    </head> 
    <body> 
    p<br>h<br>p<br>中<br>文<br>网
    </body> 
    </html>

ログイン後にコピー

cssテキストを縦書き表示する効果は以下の通りです:

CSSテキストを縦方向に表示するにはどうすればよいですか? CSSテキストを縦に表示する方法