CSS でテキストの方向を反転する方法

テキストを操作するとき、方向を反転する必要がある場合があります。デフォルトの左から右ではなく、右から左に流れます。この記事では、CSS を使用したこのようなシナリオの解決策を提供します。

テキストの方向を変更する CSS コード

次の CSS コードを使用して、テキストの方向を反転できます:

.cssClassName {
  direction: rtl;
  unicode-bidi: bidi-override;
}

クラスの適用

このコードを適用するには、反転するテキストを含む HTML 要素に .cssClassName クラスを使用します。たとえば、次のテキストを含む段落タグがある場合:

This is it

その方向を反転したい場合は、次のクラスを適用します。次のようになります:

This is it

結果のテキストは次のようになります:

ti si sihT

注: .cssClassName クラスは空の要素では機能しないため、テキストを含む要素に適用されていることを確認してください。