Maison >interface Web >tutoriel CSS >Comment obtenir une orientation verticale du texte vers la droite en CSS ?

Comment obtenir une orientation verticale du texte vers la droite en CSS ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-11 16:39:021033parcourir

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

Orientation du texte CSS : obtenir une orientation verticale vers la droite

En CSS, l'orientation du texte peut être manipulée à l'aide des propriétés writing-mode et text-orientation. Pour obtenir un texte orienté verticalement et orienté vers la droite, comme une image que vous avez peut-être vue, il faut une combinaison de ces propriétés. Cependant, il convient de noter que l'orientation texte n'est pas universellement prise en charge dans tous les navigateurs.

Code original tenté :

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

Solution avec transformation :

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

Le code d'origine tente d'être utilisé latéralement. Cependant, pour une compatibilité plus large avec les navigateurs, vous pouvez la remplacer par une transformation d'échelle. En utilisant la règle transform: scale(-1), le texte sera retourné horizontalement, inversant son orientation et créant efficacement un alignement vertical du texte sur le côté droit.

HTML :

<div>dimanche</div>

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn