Wie kann ich verhindern, dass gedrehte Inline-Elemente die Höhe ihrer übergeordneten Elemente in CSS beeinflussen?

Gedrehte Elemente beeinflussen die Höhe des übergeordneten Elements in CSS

Beim Anwenden der Drehung auf ein Inline-Element muss unbedingt sichergestellt werden, dass die Höhe des übergeordneten Elements nicht negativ beeinflusst wird. Stellen Sie sich das Szenario vor, in dem wir mehrere Spalten mit Text haben und einige davon drehen möchten.

Beispiel:

.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>

(Vorher):
[Bild von gedrehtem Text, der andere überlappt Spalten]

(Gewünscht):
[Bild von gedrehtem Text innerhalb seiner eigenen Spalte, ohne andere zu überlappen]

Lösung

Verwendung von Schrift -Modus und Drehung können wir das gewünschte erreichen Wirkung:

.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>

(Nachher):
[Bild von gedrehtem Text innerhalb seiner eigenen Spalte, ohne andere zu überlappen]

Diese Lösung gewährleistet dass die gedrehten Elemente die Höhe ihrer übergeordneten Elemente respektieren und so Textüberlappungen verhindern.

Das obige ist der detaillierte Inhalt vonWie kann ich verhindern, dass gedrehte Inline-Elemente die Höhe ihrer übergeordneten Elemente in CSS beeinflussen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!