Maison > Article > interface Web > Comment formater le texte verticalement en CSS
Comment formater le texte verticalement en CSS
- WBOYoriginal
- 2021-11-12 15:10:2628227parcourir
L'attribut writing-mode peut être utilisé en CSS pour disposer le texte verticalement. Il vous suffit d'ajouter "writing-mode:vertical-lr;", "writing-mode:vertical-rl;" -" au style de l'élément de texte. rl".
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
Comment formater le texte verticalement en CSS :
Parfois, le texte de la page Web ne peut pas être affiché horizontalement en raison d'exigences particulières. À l'heure actuelle, il faut afficher le texte verticalement. le texte de la page Web. Qu'en est-il de l'affichage vertical ? Ensuite, cet article présentera la méthode de réalisation de l'affichage vertical du texte en CSS. J'espère que cela sera utile à tout le monde.
Utilisez l'attribut writing-mode
L'attribut writing-mode définit la manière dont le texte est disposé horizontalement ou verticalement.
Syntaxe :
writing-mode:vertical-rl | vertical-lr | lr-tb | tb-rl
Paramètres :
vertical-rl: Écriture verticale de droite à gauche. C'est-à-dire haut-bas-droite-gauchevertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-leftvertical-lr：垂直方向内内容从上到下，水平方向从左到右lr-tb：从左向右，从上往下；tb-rl
vertical-lr : le contenu dans la direction verticale est de haut en bas et la direction horizontale est de gauche à droite
lr-tbcode> : de gauche à droite, de haut en bas ; 
tb-rl : de haut en bas, de droite à gauche ;
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
</head>
<style>
.one {
margin: 0 auto;
height: 140px;
writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/
}
</style>
<body>
<div class="one">好好学习，天天向上。
福如东海，寿比南山。 </div>
</body>
</html>L'effet est le suivant : 
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
</head>
<style>
.one {
margin: 0 auto;
height: 140px;
writing-mode: vertical-rl;
}
</style>
<body>
<div class="one">好好学习，天天向上。
福如东海，寿比南山。 </div>
</body>
</html>🎜 ou : 🎜<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
</head>
<style>
.one {
margin: 0 auto;
height: 140px;
writing-mode: tb-rl;/*从左向右 从右向左是 writing-mode: vertical-rl;*/
}
</style>
<body>
<div class="one">好好学习，天天向上。
福如东海，寿比南山。 </div>
</body>
</html>🎜Résultat de sortie : 🎜🎜🎜🎜🎜Pour plus de connaissances en programmation, veuillez visite : 🎜Programmation Vidéo🎜 ! ! 🎜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!