CSS で縦書きテキスト配置を実装する方法 (概要)

CSS で縦書きテキスト配置を実装する方法 (概要)

HTML でのテキストのデフォルトの配置は水平ですが、特殊な場合にはテキストを垂直に配置する必要があります。

1行テキストの縦書き

.onecn{
     幅: 20px;  
    マージン: 0 自動;  
    行の高さ: 24px;  
} 

.オニーン{
    幅: 15px;
    マージン: 0 自動;
    行の高さ: 24px;
    フォントサイズ: 20px;
    word-wrap: break-word;/*英語で書くときに行を自動的に折り返すにはこの文を追加する必要があります*/
    単語区切り:すべて区切り;
}

注: テキストを 1 行に垂直に配置するには、幅を 1 つのフォントに合わせて設定するだけで済みます。

複数行のテキストを縦に並べる

。二{
      マージン: 0 自動;
      高さ: 140px;
      writing-mode: vertical-lr;/*左から右、右から左の場合は writing-mode: vertical-rl;*/ 
    writing-mode: tb-lr;/*IE ブラウザの左から右、右から左は writing-mode: tb-rl;*/
  }

注: 高さは非常に重要です。テキストと行の間隔を制御する必要がある場合は、letter-spacing 属性と line-height 属性を追加できます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  Dockeにredisをインストールする方法

>>:  Web コンテンツ ページを作成するための 9 つの実用的なヒント

推薦する

CSS の複雑なセレクターと CSS のフォントスタイルと色属性の詳細な説明

これまでに CSS の基本的なセレクターをいくつか学習しましたが、今日は CSS の複雑なセレクター...

Linux に起動方法を追加する (サービス/スクリプト)

システムの起動時に読み込む必要がある設定ファイル/etc/profile、/root/.bash_p...

Docker イメージの最適化 (1.16GB から 22.4MB)

目次最適化の第一歩: 軽量ベースイメージの使用第2段階の最適化:多段階構築Docker は、ソフトウ...

JavaScript配列の一般的なメソッドの詳細な説明

目次元の配列を変更しない方法1. 連結文法:パラメータ:戻り値: 2. 参加する文法:パラメータ:戻...

CSS3 フィルター属性の使い方の紹介

1. はじめにフロントエンドページのアニメーション効果を記述する場合、filter 属性は多かれ少な...

js での遅延読み込みとプリロードの具体的な使用法

遅延読み込み(レイジー読み込み)とプリロードは、Web 最適化によく使用される手段です。 。 1. ...

docker イメージのプル速度が遅い問題の解決策

現在、Docker には中国向けの公式ミラーがあります。詳細については、https://www.do...

MySQL 5.6 圧縮パッケージのインストール方法

MySQL には、msi インストールと zip 解凍の 2 つのインストール方法があります。 zi...

不規則な投影を実現するためのボックスシャドウとドロップシャドウのサンプルコード

border-radius で生成できる四角形やその他の図形に影を追加する場合 (「Adaptive...

Mysqlクエリ条件で文字列の末尾にスペースがあっても一致しない問題の詳細な説明

1. テーブル構造テーブル人id名前1あなた2あなた(スペース) 3あなた(スペース2つ) 2. ク...

MySQL 自動インクリメント ID のオーバーサイズ問題のトラブルシューティングと解決策

導入Xiao A がコードを書いていたところ、DBA Xiao B が突然、「急いでユーザー固有情報...

WIN2008 サーバーのコマンド ラインを使用して IIS7 コンポーネントをインストールおよびアンインストールする方法

注意: .NET FrameWork はコア モードで実行できないため、コア インストール モードの...

フォーム検証機能を実装するためのネイティブ js

目次開発の際には、機能を段階的に分析して実装することで、明確な考え方を保つことができます。 1. フ...

Docker での Tomcat インストールの 404 問題の解決方法

tomcat の containerID を見つけて、tomacat ディレクトリに入ります。 [r...