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

推薦する

Windows 10 での MySQL 8.0.19 のインストールと設定のチュートリアル

来学期にMySQLを勉強します。事前に自宅で練習していませんでした。インストールに時間がかかるとは思...

アニメーションの再生と一時停止を制御するための CSS のヒント (非常に実用的)

今日は、CSS を使用してアニメーションの再生と一時停止を制御する非常に簡単なトリックを紹介します。...

nginx+lua を使用した単一マシンでの何万もの同時接続の実装

nginx は弊社で最もよく使用されるサーバーで、コンテンツ配信やリバース プロキシによく使用されま...

22 Vue 最適化のヒント (プロジェクトの実践)

目次コードの最適化v-for でキーを使用するv-if/v-else-if/v-else でキーを使...

Windows での MySQL 5.7.10 のインストールと設定のチュートリアル

MySQL は、ユーザーごとに 2 つの異なるバージョンを提供します。 MySQL コミュニティ サ...

Windows Server 2008 R2 マルチユーザー リモート デスクトップ接続ライセンス

仕事ではリモート サーバーが必要になることが多く、次の 2 つの問題に遭遇することがよくあります。 ...

MySQL の instr を使用したファジー クエリ メソッドの紹介

MySQL の内部関数instrを使用すると、従来の like クエリ メソッドを置き換えることがで...

mysql5.7.21 utf8 エンコーディングの問題と Mac 環境での解決方法

1. 目標: mysql の character_set_server の値を latin1 から ...

div タグ内の要素の margin-top が無効である場合の解決策

タイトル通りです。その質問は非常に奇妙です。要素の親タグはdivで、幅や高さなどの属性は設定されてい...

Nginx ドメイン名の書き換えとワイルドカードドメイン名の解決を設定する方法

この記事では、ドメイン名の書き換えとワイルドカードドメイン名の解決を行うための Nginx の設定方...

カレンダー効果を実現するための Bootstrap+JQuery

この記事では、カレンダー効果を実現するためのBootstrap+Jqueryの具体的なコードを参考ま...

MySQL全文検索の使用例

目次1. 環境整備2. データの準備3. ショーを始める4. 単語分割エンジン要約する参考文献1. ...

Docker 実行時にユーザーとグループを管理する方法

Docker はプロセスを中核としてシステムリソースを分離する管理ツールです。分離は、オペレーティン...

mybatis-plusページングパラメータが渡された後、SQLのwhere条件にはページング情報操作の制限がありません

2時間近くかけて、さまざまな方法を試しました。後で、whereでフィルタリングした後のデータ量が1ペ...

Vueのprovideとinjectの使い方と原則を分析する

まず、provide/inject を使用する理由について説明しましょう。祖父コンポーネントと孫コン...