Comment puis-je afficher du texte vertical dans les en-têtes de tableau avec une hauteur dynamique et sans débordement ?

Affichage du texte vertical dans les en-têtes de tableau avec une hauteur dynamique et sans débordement

Pour afficher le texte pivoté sous forme d'en-têtes de tableau à l'aide de la propriété de transformation CSS, il existe un défi consistant à empêcher le texte pivoté de déborder lorsque la ligne d'en-tête doit ajuster sa hauteur.

Problème :

Lors de l'utilisation de la propriété de transformation CSS :

transform: rotate(-90deg);

Pour faire pivoter le texte d'en-tête, la ligne d'en-tête reste à sa hauteur d'origine, provoquant le débordement du texte pivoté :

[Image d'un mauvais exemple]

Solution :

Pour permettre à la ligne d'en-tête de s'agrandir selon vos besoins, utilisez la propriété CSS :

writing-mode: vertical-lr;

Explication :

contrôles en mode écriture le sens d'écriture du texte. La valeur vertical-lr indique que le texte doit être écrit verticalement de gauche à droite. Cela garantit que le texte pivoté s'adapte à l'espace vertical de la cellule d'en-tête, permettant à la ligne d'en-tête d'ajuster sa hauteur en conséquence.

[Image de l'exemple correct]

Exemple de code :

th {
  writing-mode: vertical-lr;
  transform: rotate(-90deg);
}

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!