Bagaimana untuk Memutar Teks dalam CSS Tanpa Isu Penjajaran?

Cara Memutar Teks dalam CSS Tanpa Isu Penjajaran

Untuk mencapai putaran teks seperti yang ditunjukkan dalam imej yang disediakan, transformasi CSS boleh digunakan . Walau bagaimanapun, berbuat demikian selalunya mengakibatkan salah jajaran dan masalah kedudukan. Isu ini timbul kerana putaran mempengaruhi kedudukan elemen dalam aliran.

Dalam HTML yang disediakan, berbilang tajuk dan bahagian kandungan bersarang dalam bekas. Untuk memutarkan tajuk, sifat transform: rotate(-90deg) digunakan. Walau bagaimanapun, putaran ini mengganggu penjajaran kandungan kerana diandaikan bahawa kandungan mengalir secara mendatar selepas tajuk.

Punca Isu Penjajaran

1. Aliran Mendatar: Kandungan ditetapkan terapung ke kiri, menyebabkan ia mengalir secara mendatar selepas diputar tajuk. Putaran mewujudkan jurang menegak, yang memecahkan penjajaran yang dimaksudkan.
2. Lebar Diabaikan: Apabila tajuk diputar, lebarnya diabaikan. Akibatnya, kandungan terus mengalir secara mendatar, dengan anggapan tajuk masih menempati ruang lebar.

Penyelesaian: Mengekalkan Penjajaran

Untuk mengekalkan penjajaran yang betul, kami boleh menggunakan strategi berikut:

1. Aliran Menegak:

• Tukar tajuk kepada elemen blok dengan menambahkan paparan: blok.
• Gunakan mod penulisan: menegak-rl untuk menukar mod penulisan kepada menegak.
• Putar tajuk tanpa menjejaskan kedudukannya dengan menggunakan transform: rotate(-90deg) atau transform: rotateZ(-90deg).
• Tetapkan mod penulisan kandungan kepada mod penulisan: horizontal-tb.

Contoh:

<code class="css">.title {
  display: block;
  writing-mode: vertical-rl;
  transform: rotateZ(-90deg) /* or transform: rotate(-90deg) */;
}

.content {
  writing-mode: horizontal-tb;
}</code>

2. Kedudukan Mutlak:

• Tukar tajuk kepada elemen mutlak dengan menambah kedudukan: mutlak.
• Putar tajuk menggunakan transform: rotate(-90deg).
• Letakkan tajuk secara menegak dengan menetapkan sifat atas dan bawahnya.
• Sejajarkan kandungan dengan tajuk yang diputar dengan menggunakan jidar.

Contoh:

<code class="css">.title {
  position: absolute;
  transform: rotate(-90deg);
  top: 0;
  bottom: 0;
}

.content {
  margin-left: 50px /* adjust the margin to align with the rotated title */;
}</code>

Dengan menggunakan kaedah ini, anda boleh memutar teks dalam CSS sambil mengekalkan penjajaran dan kedudukan elemen bersebelahan.

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