Wie kann die übergeordnete Höhe beim Drehen von CSS-Elementen genau beibehalten werden?

Gedrehte Elemente in CSS: Präzise Beeinflussung der Höhe des übergeordneten Elements

In diesem Artikel untersuchen wir die Herausforderung, bestimmte Elemente innerhalb von Spalten zu drehen, ohne die Höhe ihres übergeordneten Elements zu verzerren. Betrachten wir ein Beispiel mit vier Spalten, in denen wir die Werte in einer davon wie unten gezeigt drehen möchten:

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

Mit dem folgenden CSS:

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

Dies führt zu a gedrehtes Element, das sich mit dem anderen überlappt Spalten:

Ziel: Erzielen eines Ergebnisses, bei dem die Größe des gedrehten Elements immer noch zur Höhe seines übergeordneten Elements beiträgt und Text verhindert Überlappung:

Lösung:

Wie von G-Cyr hervorgehoben, bieten moderne Browser eine gute Unterstützung für den Schreibmodus. Durch die Kombination des Schreibmodus mit einer einfachen Drehung können wir das gewünschte Ergebnis erzielen:

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

Dieser Code setzt den Schreibmodus der gedrehten Elemente auf „vertikal-rl“ und stellt so sicher, dass der Text nach der Drehung vertikal fließt 180 Grad. Es ermöglicht außerdem einen korrekten Zeilenumbruch und vermeidet Textüberlappungen.

Das obige ist der detaillierte Inhalt vonWie kann die übergeordnete Höhe beim Drehen von CSS-Elementen genau beibehalten werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!