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 でログインと登録テンプレートを実装するためのサンプルコード

テンプレート 1: ログイン.vue <テンプレート> <p class=&quo...

IE8を閲覧するときにウェブサイトが自動的にIE7互換モードを使用するようにする

序文IE の将来のすべてのバージョンで Web ページの外観が一貫していることを保証するために、IE...

HTML でカスタム画像を使用してチェックボックスを表示する方法

チェックボックスの使用を実装するために画像を使用する必要がある場合は、それを使用して実装できます。実...

WeChatアプレットが複数行テキストのスクロール効果を実現

この記事の例では、WeChatアプレットで複数行のテキストスクロールを実装するための具体的なコードを...

MySQL DEFINER の使用方法の詳細な説明

目次序文: 1.DEFINERの簡単な紹介2. いくつかの注意点要約:序文: MySQL データベー...

MySQLで時間を判定条件として使用する方法

背景: 開発プロセスでは、現在の月、現在の日、現在の時間、今後数日など、時間を判断条件としてデータを...

メニューノードのすべての子ノードを再帰的に検索する MySQL メソッド

背景プロジェクトにはメニューノードのすべてのノードをチェックする要件があります。オンラインでチェック...

Windows での自動展開に Jenkins を使用するチュートリアル図

今日は、Jenkins + powershell スクリプトを使用して、.NET CORE スクリプ...

Docker Composeを使用してDOCleverをインストールする詳細なプロセスを説明します

目次1. Docker Composeとは何か、インストールして使用する方法2. DOCleverと...

JS の Promise に中止関数を追加する方法

目次概要プロミスレースメソッド約束の再パッケージ化中止コントローラAxiosプラグインにはキャンセル...

MySQLオンラインDDL gh-ostの使用の概要

背景: DBA として、大規模なテーブルの DDL 変更のほとんどは、Percona の pt-on...

Dockerコンテナとホスト間のデータ相互作用の概要

序文実稼働環境で Docker を使用する場合、多くの場合、データを複数のコンテナ間で永続化または共...

MySQL ストレステストツール Mysqlslap の使用

1. MySQL独自のストレステストツールMysqlslap mysqlslap は、mysql に...

Nginx ストリーム構成プロキシ (Nginx TCP/UDP ロード バランシング)

序章nginx が優れたリバース プロキシ サービスであることは誰もが知っています。nginx を使...