Comment puis-je afficher du texte vertical dans les en-têtes de tableau avec une hauteur automatique ?

Affichage du texte vertical dans les en-têtes de tableau avec hauteur automatique

Dans le but de créer des en-têtes de tableau avec du texte pivoté à l'aide de transformations CSS, les développeurs rencontrent souvent le problème de débordement de texte en raison de l'incapacité de la ligne d'en-tête à ajuster automatiquement sa hauteur. Pour résoudre ce problème et obtenir le résultat souhaité d'un texte aligné verticalement dans les en-têtes de tableau, nous présentons une solution.

Solution

Au lieu de nous fier uniquement à la propriété de transformation CSS pour faire pivoter le texte, utilisez la propriété CSS writing-mode pour définir la direction d'écriture comme verticale de gauche à droite (writing-mode : vertical-lr). Cette propriété transforme l'intégralité de l'en-tête du tableau en une disposition verticale, permettant au texte de circuler naturellement sans déborder. Reportez-vous au Mozilla Developer Network pour plus d'informations sur le mode d'écriture : https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode.

En implémentant cette solution, le l'en-tête du tableau augmentera automatiquement en hauteur selon les besoins pour s'adapter au texte aligné verticalement, offrant ainsi une présentation propre et organisée des données de votre tableau.

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!