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 つの実用的なヒント

推薦する

Vueでデータ例を定義する方法

序文開発プロセスにおいて、変数の定義は非常に頻繁かつ基本的なタスクです。変数の使用シナリオと範囲に応...

XHTMLはHTMLのいくつかの廃止された要素を使用しなくなりました

CSS ウェブページレイアウトを行う場合、XHTML1.0 仕様に準拠する必要があることは誰もが知っ...

docker を使用して Windows 10 Home バージョンで Laravel 開発環境を構築する方法の詳細なチュートリアル

オペレーティング·システム: Win10 ホームエディションDockerをインストールします:公式サ...

「@INC で ExtUtils/MakeMaker.pm が見つかりません」というエラーを解決する

mha4mysql をインストールする場合の手順は、おおよそ次のようになります: unzip、per...

Dockerコンテナでyumを呼び出すときのエラーの解決方法

dockerfile またはコンテナ内で yum を実行すると、エラーが報告され、ソースが見つかりま...

ウェブサイトの画像にグレー効果を加える3つの方法

私はグレースケールの画像の方が芸術的に見えると思うので、いつもグレースケールの画像を好んで使っていま...

CentOS7 64でのMySQL5.6.40の詳細なインストール手順

CentOS7 64でのMySQL5.6.40のインストール手順1) 以前にインストールしたMySQ...

MySQL スローログ実践のまとめ

遅いログクエリ機能スロー ログ クエリの主な機能は、設定された時間しきい値を超える SQL ステート...

docker nginxコンテナの起動とローカルへのマウントの詳細な説明

まず、nginx コンテナ内の構造:コンテナを入力します: docker exec -it b511...

WeChatミニプログラム抽選コンポーネントの使い方

WeChatコンポーネントの形式で提供されます。コンポーネント内部ではasync/awaitが使用さ...

Linux で lvm 論理ボリューム パーティションのサイズを調整するチュートリアル (xfs や ext4 などのさまざまなファイル システム用)

序文システムをインストールしたときに、パーティション領域を適切に割り当てませんでした。その後のメンテ...

Docker ベースの MySQL マスタースレーブレプリケーション環境を構築するための実装手順

1. はじめに以前のプログラム アーキテクチャは次の形式になります。プログラムのサイズが大きくなると...

LeetCode の SQL 実装 (184. 部門内で最も高い給与)

[LeetCode] 184. 部門最高給与従業員テーブルにはすべての従業員が保存されます。すべて...

MySQL ロック制御同時実行方法

目次序文1. 楽観的ロックバージョンフィールドを追加する2. 悲観的ロック読み取りロック完全なテーブ...

MySQLの結合クエリ、ユニオンクエリ、サブクエリの原理と使用例の詳細な説明

この記事では、例を使用して、MySQL の結合クエリ、結合クエリ、サブクエリの原理と使用方法を説明し...