テキスト ボックスを回転させずに、Web デザインで真の縦書きテキストを実現するにはどうすればよいですか?

Web デザインで真の垂直方向のテキストを実現する

Web デザインの領域では、通常、テキストの配置は水平方向または垂直方向に従います。ただし、特定のデザイン要件では、テキストを垂直に表示する必要がある場合があります。この質問では、回転テキスト ボックスの制限を超えて、この効果を実現する方法を検討します。

関連する質問:

ユーザーがテキストを垂直方向に表示する方法を求めています。効果をシミュレートするために回転ボックスを作成することに不満を表明しています。

効果的解決策:

提案された解決策は、CSS プロパティ書き込みモードを使用した代替アプローチを提供します。具体的には、プロパティ tb-rl を使用すると、テキストを上から下、右から左に記述して、垂直方向のテキスト方向を作成できます。

実装:

推奨される方法を使用して縦方向のテキスト方向に設定するには、次のコードを目的の要素に適用します。

p {
  writing-mode: tb-rl;
}

書き込みモードを に設定します。 tb-rl を使用すると、選択した要素内のテキストが垂直方向に表示され、真の垂直方向のテキスト方向効果が得られます。

以上がテキスト ボックスを回転させずに、Web デザインで真の縦書きテキストを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。