Bagaimanakah Saya Boleh Menghalang Elemen Sebaris Diputar daripada Menjejaskan Ketinggian Ibu Bapa Mereka dalam CSS?

Elemen Diputar yang Mempengaruhi Ketinggian Induk dalam CSS

Apabila menggunakan putaran pada elemen sebaris, adalah penting untuk memastikan ketinggian ibu bapa tidak terjejas. Pertimbangkan senario di mana kita mempunyai berbilang lajur dengan teks dan ingin memutar beberapa.

Contoh:

.statusColumn b {
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

<div class="container">
  <div class="statusColumn"><span>Normal</span></div>
  <div class="statusColumn"><a>Normal</a></div>
  <div class="statusColumn"><b>Rotated</b></div>
  <div class="statusColumn"><abbr>Normal</abbr></div>
</div>

(Sebelumnya):
[Imej teks diputar bertindih yang lain lajur]

(Dikehendaki):
[Imej teks diputar dalam lajurnya sendiri, tidak bertindih yang lain]

Penyelesaian

Menggunakan penulisan -mode dan putar, kita boleh mencapai keinginan ini kesan:

.statusColumn {
  position: relative;
  border: 1px solid #ccc;
  padding: 2px;
  margin: 2px;
  width: 200px;
}

.statusColumn i,
.statusColumn b,
.statusColumn em,
.statusColumn strong {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
}

<div class="container">
  <div class="statusColumn"><span>Normal</span></div>
  <div class="statusColumn"><a>Normal</a></div>
  <div class="statusColumn"><b>Rotated</b></div>
  <div class="statusColumn"><abbr>Normal</abbr></div>
</div>

(Selepas):
[Imej teks diputar dalam lajurnya sendiri, tidak bertindih yang lain]

Penyelesaian ini memastikan bahawa elemen yang diputar menghormati ketinggian ibu bapanya, mengelakkan teks bertindih.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghalang Elemen Sebaris Diputar daripada Menjejaskan Ketinggian Ibu Bapa Mereka dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!