CSSを使って文字の縦配置を実現する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSを使って文字の縦配置を実現する方法

云罗郡主

Nov 23, 2018 pm 05:25 PM

css

この記事の内容は、CSS を使用してテキストを縦方向に配置する方法についてです。必要な方は参考にしていただければ幸いです。

CSSを使って文字の縦配置を実現する方法

#スタイルシートのテキスト処理プロパティには、writing-mode と text-align という 2 つの重要なプロパティがあります。まず使用法を見てみましょう:

1. 書き込みモード (オブジェクトの書き込み方向の設定)

構文: 書き込みモード: lr-tb、tb-rl

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

例:

CSS コードコンテンツをクリップボードにコピーします

div { writing-mode: tb-rl; }

2. text-align (オブジェクト内のテキストの配置を設定します)

構文: text-align: left、right、center、justify

パラメータ: left : 左揃え右揃え: 右揃え中央揃え: 中央揃え: 両端揃え

#例:

#CSS コードコンテンツをクリップボードにコピーします

div { text-align : center; }

そして、通常のレイアウトのアイデア: 右テキストオブジェクトの幅設定では、次のテキストの幅の距離のみを調整できます。テキストが 1 行に 2 文字収まらない場合、テキストは自動的に折り返されるため、縦書き組版が必要になります。

CSS コード内容をクリップボードにコピーします

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>竖列排版实例 在线演示 www.divcss8.com</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 を使用してテキストを縦方向に配置する方法の完全な紹介です。

CSS3 チュートリアルについて詳しく知りたい場合は、

、PHP 中国語 Web サイトに注意してください。

以上がCSSを使って文字の縦配置を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

「ポッドキャストにサブスクライブ」リンクはどこにすべきですか？Apr 16, 2025 pm 12:04 PM

しばらくの間、iTunesはポッドキャストの大きな犬だったので、「ポッドキャストにサブスクライブ」をリンクした場合：

ブラウザエンジンの多様性Apr 16, 2025 pm 12:02 PM

彼らが2013年にChromeに行ったとき、私たちはオペラを失いました。今年初めにChromeになったとき、Edgeと同じ取引。マイク・テイラーはこれらの変更を「減少させて」と呼びました

Web共有に関するUXの考慮事項Apr 16, 2025 am 11:59 AM

Trashy ClickBaitサイトから出版物の最大の8月まで、共有ボタンは長い間ウェブ全体でユビキタスでした。それでも、これらは議論の余地があります

毎週のプラットフォームニュース：AppleはWebコンポーネント、プログレッシブHTMLレンダリング、自己ホストの重要なリソースを展開していますApr 16, 2025 am 11:55 AM

今週のラウンドアップでは、AppleはWebコンポーネント、InstagramがどのようにInsta-Loadingスクリプトであるか、自己ホストの重要なリソースのための考えのための食べ物に入ります。

git pathspecsとそれらの使用方法Apr 16, 2025 am 11:53 AM

gitコマンドのドキュメントを調べていたとき、それらの多くが選択肢があることに気付きました。私は当初、これはただのものだと思っていました

製品画像のカラーピッカーApr 16, 2025 am 11:49 AM

難しい問題のように聞こえます。私たちはしばしば、何千もの色で製品ショットを持っていないので、withをひっくり返すことができます。私たちもそうしません

ReactとThemeproviderを使用した暗いモードの切り替えApr 16, 2025 am 11:46 AM

ウェブサイトにダークモードオプションがあるときが好きです。ダークモードにより、ウェブページが読みやすくなり、目がリラックスしているように感じます。を含む多くのウェブサイト

HTMLダイアログ要素を使用したいくつかの実践Apr 16, 2025 am 11:33 AM

これは私が初めてHTML要素を見ていることです。私はしばらくの間それを知っていましたが、まだスピンしていませんでした。かなりクールです

See all articles

ホットAIツール

ホットツール

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、