CSSでdivテキストを縦書きにする方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

藏色散人

Feb 23, 2021 pm 02:59 PM

css

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 までご連絡ください。

「ポッドキャストにサブスクライブ」リンクはどこにすべきですか？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 脆弱性のいくつかを実践することです。このソフトウェアは、