Bagaimana untuk Memutar Teks dalam CSS Tanpa Mengkompromi Penjajaran?

Cara Memutar Teks dalam CSS untuk Mendapat Putaran Sejajar

Memusingkan teks dalam CSS menambah elemen dinamik pada reka bentuk web, tetapi kadangkala boleh membawa kepada isu penjajaran. Begini cara untuk menangani cabaran ini dan mencapai putaran yang diingini:

Dalam HTML anda, sediakan teks dalam elemen bersarang, seperti dalam kod HTML yang disediakan.

<code class="css">.mainWrapper{margin:0 auto; width:960px; background:#EFEFEF;}
.rotateObj{position:relative; height:400px;}
.rotateObj .title{
    float:left;
    background:gray;
    width:50px;
    height:100%;
    
    /** Rounded Border */ 
    border-radius:5px;-moz-border-radius:5px;
    
    /** Rotation */
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg);    
    transform:rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.rotateObj .active{background:green;}
.rotateObj .content{float:left;width:600px;height:100%;padding:20px;}
.hide{display:none;}</code>

CSS di atas memutarkan Elemen kelas ".title" 90 darjah lawan jam menggunakan sifat "transform: rotate(-90deg)".

Walau bagaimanapun, putaran menyebabkan penjajaran teks terputus. Untuk menyelesaikan masalah ini, "writing-mode: vertical-rl;" sifat boleh ditambah terus selepas sifat "transform".

<code class="css">writing-mode: vertical-rl;</code>

Harta ini menukar orientasi teks kepada menegak, memastikan penjajaran yang betul selepas putaran.

Sebagai alternatif, jika anda mahu teks itu kekal mendatar, anda boleh menggunakan sifat "jarak huruf" untuk melaraskan jarak antara aksara. Sebagai contoh, menetapkannya kepada nilai yang besar boleh mencipta ilusi putaran sambil mengekalkan penjajaran mendatar:

<code class="css">letter-spacing: 10px;</code>

Dengan mengambil kira pertimbangan ini dan menggunakan sifat CSS yang sesuai, anda boleh memutarkan teks dalam CSS dengan berkesan tanpa penjajaran berkompromi.

Atas ialah kandungan terperinci Bagaimana untuk Memutar Teks dalam CSS Tanpa Mengkompromi Penjajaran?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!