Comment obtenir une disposition horizontale du texte en CSS

Comment implémenter la disposition horizontale du texte en CSS : créez d'abord un exemple de fichier HTML ; puis créez une balise p ; et enfin utilisez l'attribut "writing-mode: horizontal-tb;" pour obtenir une disposition horizontale du texte.

L'environnement d'exploitation de cet article : système Windows7, version HTML5&&CSS3, ordinateur Dell G3.

Comment réaliser une disposition horizontale du texte en CSS ?

css implémente la disposition du texte horizontalement/verticalement

writing-mode : Mode d'écriture

属性值	效果
horizontal-tb	横向排列
vertical-rl	竖向排列，从右到左
vertical-lr	竖向排列，从左到右

Les exemples sont les suivants

html :

<p class="textBox">
    <h1 id="horizontal-tb-横向排列">horizontal-tb：横向排列</h1>
    <h1 id="vertical-rl-纵向排列-从右到左">vertical-rl：纵向排列，从右到左</h1>
    <h1 id="vertical-lr-纵向排列-从左到右">vertical-lr：纵向排列，从左到右</h1></p>

css :

    <style>
        .textBox h1{
            width: 200px;
            height: 200px;
            margin: 10px 10px;
            padding: 10px;
            float: left;
        }
        .textBox h1:nth-of-type(1){
            writing-mode: horizontal-tb;
            background-color: #42b983;
        }
        .textBox h1:nth-of-type(2){
            writing-mode: vertical-rl;
            background-color: #42a8b9;
        }
        .textBox h1:nth-of-type(3){
            writing-mode: vertical-lr;
            background-color: #81b9aa;
        }
    </style>

Effet de réussite :

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