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 を応援していただければ幸いです。 |
>>: Web コンテンツ ページを作成するための 9 つの実用的なヒント
推薦する
MySQLの暗黙的な変換問題の解決
1. 問題の説明 root@mysqldb 22:12: [xucl]> テーブル t1\G ...
vue3 のさまざまなファイルタイプのプレビュー機能の例
目次序文1. オフィス文書の種類のプレビュー2. PDF形式のプレビュー3. 画像の種類4. ビデオ...
MySQL ストアド プロシージャにおけるループ ステートメント (WHILE、REPEAT、LOOP) の使用法の分析
この記事では、例を使用して、MySQL ストアド プロシージャでのループ ステートメント (WHIL...
CSSレイアウトにおけるフロート属性と位置属性の違い
CSS レイアウト - position プロパティposition 属性は、要素に適用する配置方法...
Vue の computed と watch の違いを理解する方法
目次概要計算された監視プロパティを監視する要約する概要Vue プロジェクトでは、computed と...
MySQL 5.7.17無料インストール版のインストールと設定
MYSQLバージョン：MySQL Community Server 5.7.17、インストール不要版...
MySQLのINサブクエリによってインデックスが使用できなくなる問題を解決する
今日は、MySQL IN サブクエリの最適化に関するケーススタディを見ました。最初は少し懐疑的でした...
Linux で起動時にプログラムを自動的に実行させる最も簡単な方法
たくさん集めましたが、すべて失敗に終わりました。最終的に、この方法は優れており、使用に影響を与えない...
VScode設定のリモートデバッグLinuxプログラムの問題を解決する
VScode リモートデバッグ Linux プログラムの問題について見てみましょう。具体的な内容は以...
MySQLのユーザー管理とPostgreSQLのユーザー管理の違い
1. MySQL ユーザー管理[例1.1] ローカルMySQLサーバーのテストデータベースにroot...
Mysqlはマスタースレーブ構成とマルチマスターマルチスレーブ構成を実装します
現在シミュレーションしているのは、マスター スレーブ システム (ホスト 1 台とスレーブ 1 台)...
ウェブサイトのパフォーマンスを向上させるためのウェブサーバーの改善
<br />このシリーズの最初のセクションでは、Web サイトのパフォーマンスを向上させ...
MySQL 5.6 ルートパスワード変更チュートリアル
1. MySQL 5.6をインストールした後、正常に有効化できないMySQL の圧縮バージョンは、解...
Tomcat が設定ファイルを外部に配置するためのソリューション
質問通常の開発では、プロジェクトを Tomcat にデプロイする場合、プロジェクトを war パッケ...