Comment puis-je empêcher les éléments en ligne pivotés d'affecter la hauteur de leur parent en CSS ?

Éléments pivotés affectant la hauteur du parent en CSS

Lors de l'application d'une rotation à un élément en ligne, il est crucial de s'assurer que la hauteur du parent n'est pas affectée. Considérons le scénario dans lequel nous avons plusieurs colonnes avec du texte et souhaitons en faire pivoter quelques-unes.

Exemple :

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

(Avant) :
[Image d'un texte pivoté chevauchant d'autres colonnes]

(Souhaité) :
[Image du texte pivoté dans sa propre colonne, sans chevauchement des autres]

Solution

Utiliser l'écriture -mode et rotation, nous pouvons réaliser ce souhaité effet :

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

(Après):
[Image du texte pivoté dans sa propre colonne, sans chevauchement des autres]

Cette solution garantit que les éléments pivotés respectent la hauteur de leur parent, empêchant ainsi le chevauchement du texte.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!