ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS でテキストの右側垂直方向を実現するにはどうすればよいですか?

CSS でテキストの右側垂直方向を実現するにはどうすればよいですか?

Susan Sarandon
Susan Sarandonオリジナル
2024-11-11 16:39:02990ブラウズ

How to Achieve Vertical Right-Side Text Orientation in CSS?

CSS テキストの向き: 垂直右側の向きを実現する

CSS では、writing-mode プロパティと text-orientation プロパティを使用してテキストの向きを操作できます。見たことのある画像のように、右向きの垂直方向のテキストを実現するには、これらのプロパティの組み合わせが必要です。ただし、テキスト方向はブラウザー間で普遍的にサポートされているわけではないことに注意してください。

試行された元のコード:

div {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}

変換による解決策:

div {
  writing-mode: vertical-rl;
  transform: scale(-1);
}

元のコードは横向きで使用しようとしています。ただし、ブラウザーの互換性を広げるために、これをスケール変換で置き換えることができます。 「transform:scale(-1)」ルールを採用すると、テキストが水平方向に反転され、向きが逆転し、テキストの右側の垂直配置が効果的に作成されます。

HTML:

<div>dimanche</div>

以上がCSS でテキストの右側垂直方向を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。