Comment formater le texte verticalement en CSS-tutoriel CSS-php.cn

Comment formater le texte verticalement en CSS

WBOY

Libérer： 2021-11-12 15:10:26

original

28171 Les gens l'ont consulté

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".

Comment formater le texte verticalement en CSS

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

Copier après la connexion

Paramètres :

vertical-rl : Écriture verticale de droite à gauche. C'est-à-dire haut-bas-droite-gauchevertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left
vertical-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-tb</code code> : de gauche à droite, de haut en bas ; <p><img src="https://img.php.cn/upload/image/708/235/196/1636699356195052.png" title="1636699356195052.png" alt="Comment formater le texte verticalement en CSS"/></p><p><code>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>

Copier après la connexion

L'effet est le suivant : Comment formater le texte verticalement en CSS

Ou passer :

<!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>

Copier après la connexion

🎜 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>

Copier après la connexion

🎜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!