Bagaimana untuk mencapai susunan teks mendatar dalam css

Cara melaksanakan susunan teks mendatar dalam CSS: Mula-mula buat fail sampel HTML, kemudian buat tag p dan akhirnya gunakan atribut "writing-tb;" untuk mencapai susunan teks mendatar;

Persekitaran pengendalian artikel ini: sistem Windows 7, versi HTML5&&CSS3, komputer Dell G3.

Bagaimana untuk merealisasikan susunan teks mendatar dalam css?

css untuk menyusun teks secara mendatar/menegak

mod penulisan: Mod penulisan

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

Contoh adalah seperti berikut:

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>

Kesan pencapaian:

Pembelajaran yang disyorkan: "tutorial video css"

Atas ialah kandungan terperinci Bagaimana untuk mencapai susunan teks mendatar dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!