Comment rendre le texte div vertical en CSS-tutoriel CSS-php.cn

Comment rendre le texte div vertical en CSS

藏色散人

Libérer： 2023-01-03 09:24:42

original

6128 Les gens l'ont consulté

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.

Comment rendre le texte div vertical en CSS

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; }

Copier après la connexion

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>

Copier après la connexion

Rendu :

Comment rendre le texte div vertical en CSS

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>

Copier après la connexion

Rendu :

Comment rendre le texte div vertical en CSS