Comment empêcher les éléments pivotés CSS de chevaucher d'autres éléments ?

Éléments pivotés en CSS qui s'alignent verticalement

En CSS, vous pouvez utiliser la propriété writing-mode pour faire pivoter le texte verticalement. Cependant, la rotation du texte peut affecter le positionnement de ses éléments parents. Cela peut conduire à des résultats inattendus, tels que du texte chevauchant d'autres éléments.

Problème :

Considérons l'exemple suivant :

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

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

Ce code donne la disposition suivante :

[Image du texte sur quatre colonnes, avec la troisième colonne pivotée de 90 degrés]

Comme vous pouvez le voir, le texte pivoté chevauche les autres éléments.

Solution :

Pour résoudre ce problème, vous pouvez utiliser le propriété writing-mode sur l’élément parent pour faire pivoter le texte verticalement. Cela garantira que le texte pivoté s'aligne correctement dans l'élément parent.

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

Ce code donne la disposition suivante :

[Image du texte sur quatre colonnes, avec la troisième colonne pivotée verticalement]

Comme vous pouvez le voir, le texte pivoté est désormais aligné verticalement dans l'élément parent et ne chevauche pas les autres éléments.

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!