Comment orienter le texte verticalement à droite en CSS ?

Comment orienter le texte verticalement à droite en utilisant CSS

Pouvez-vous aligner le texte verticalement à droite en CSS ? Par exemple, vous souhaiterez peut-être afficher une date comme « Dimanche » à la verticale mais positionnée sur le côté droit d'un élément.

Problème :

Vous avez essayé d'utiliser le code suivant, mais il n'inverse pas le orientation :

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

Solution :

La valeur latérale n'est pas prise en charge par tous les navigateurs. Au lieu de cela, vous pouvez utiliser une transformation d'échelle pour obtenir l'effet souhaité :

div {
  writing-mode: vertical-rl;
  /*text-orientation: sideways;*/
  transform:scale(-1);
}

Cela retournera le texte horizontalement, le faisant apparaître comme s'il était orienté verticalement vers la droite.

Exemple :

<div>Sunday</div>

Sortie avec Transformation :

|
|
| Dimanche

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!