Comment rendre le texte div vertical avec CSS : créez d'abord un exemple de fichier HTML ; puis créez un div ; enfin définissez le style CSS sur "div{writing-mode: tb-rl;}" pour le rendre vertical. . Le texte div est vertical.
L'environnement d'exploitation de cet article : système Windows 7, HTML5&&CSS3, ordinateur Dell G3.
Comment définir la disposition verticale du texte en CSS :
1. mode d'écriture (définir la direction d'écriture de l'objet)
Syntaxe : mode d'écriture : lr-tb, tb-rl
Paramètres : lr-tb : de gauche à droite, de haut en bas tb-rl : de haut en bas, de droite à gauche
Exemple :
Code CSS :
div { writing-mode: tb-rl; }Exemple :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>竖列排版实例</title>
<style>
div { writing-mode: tb-rl; }
</style>
</head>
<body>
<div>我是竖列排版</div>
</body>
</html>Rendu :
2. Idées de mise en page courantes : Définir la largeur du L'objet texte ne peut organiser que la distance en largeur du texte suivant. Si le texte ne peut pas contenir deux caractères sur une ligne, le texte sera automatiquement renvoyé à la ligne, ce qui crée une exigence de composition verticale.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>竖列排版实例</title>
<style>
body{text-align:center}
.shuli{ margin:0 auto;width:20px;line-height:24px;border:1px solid #333}
</style>
</head>
<body>
<div class="shuli">我是竖列排版</div>
</body>
</html>Rendu :
Recommandé : "Tutoriel vidéo CSS"
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
