Maison >interface Web >tutoriel CSS >Comment empêcher les éléments pivotés CSS de chevaucher d'autres éléments ?

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

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-12-13 02:11:12794parcourir

How to Prevent CSS Rotated Elements from Overlapping Other Elements?

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

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn