Comment réaliser une disposition verticale du texte en utilisant CSS-tutoriel CSS-php.cn

Comment réaliser une disposition verticale du texte en utilisant CSS

云罗郡主

Libérer： 2018-11-23 17:25:13

original

2970 Les gens l'ont consulté

Le contenu de cet article explique comment utiliser CSS pour obtenir une disposition verticale du texte. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Comment réaliser une disposition verticale du texte en utilisant CSS

Il y a deux attributs importants dans les attributs de traitement de texte de la feuille de style : le mode d'écriture et l'alignement du texte. Jetons d'abord un coup d'œil à leur utilisation :

1. >Paramètres : lr-tb : de gauche à droite, de haut en bas tb-rl : de haut en bas, de droite à gauche

Exemple :

Le code CSS copie le contenu dans le presse-papiers

2. text-align (définir l'alignement du texte dans l'objet)

Syntaxe : text-align : gauche, droite, centre, justifier

div { writing-mode: tb-rl; }

Copier après la connexion

Paramètres : gauche : aligné à gauche droite : aligné à droite centre : centré justifier : aligné aux deux extrémités

Exemple :

Code CSS Copier le contenu dans le presse-papiers

Et généralement Idée de composition ordinaire : définir la largeur de l'objet texte ne peut organiser que la distance en largeur du texte suivant, de sorte que le texte ne puisse pas contenir deux caractères sur une ligne et que le texte soit automatiquement renvoyé à la ligne, formant une exigence de composition verticale.

Le code CSS copie le contenu dans le presse-papiers

div { text-align : center; }

Copier après la connexion

Ce qui précède est une introduction complète à la façon d'utiliser CSS pour obtenir une disposition verticale du texte. Si vous souhaitez en savoir plus sur

CSS3. Tutoriel

, veuillez faire attention au site Web PHP chinois.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>竖列排版实例 在线演示 www.divcss8.com</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

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!