ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSテキストを縦方向に表示するにはどうすればよいですか? CSSテキストを縦に表示する方法
CSSテキストを縦方向に表示するにはどうすればよいですか? CSSテキストを縦に表示する方法
- 不言オリジナル
- 2018-09-18 14:07:4825114ブラウズ
特殊な要件により、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 テキストの垂直表示効果は次のとおりです:
この方法は互換性が低く、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 縦書きテキスト表示方法 3:
この方法は互換性が高く、コードも簡単だと思います。
<!DOCTYPE html>
<html>
<head>
<style>
h1 { width: 50px; font-size: 50px;letter-spacing: 20px; }
</style>
</head>
<body>
<h1>中秋月</h1>
</body>
</html>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テキストを縦書き表示する効果は以下の通りです:
実はこちらの記事で紹介されています。テキストの縦書き表示を実現する方法は他にもたくさんありますが、ここでは一つ一つ紹介しません。さらにエキサイティングなコンテンツについては、php 中国語 Web サイトに注目してください。
以上がCSSテキストを縦方向に表示するにはどうすればよいですか? CSSテキストを縦に表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。