Comment obtenir un réglage automatique de la hauteur du texte vertical dans les en-têtes de tableau ?

Texte vertical dans les en-têtes de tableau avec hauteur automatique

Lors de la conception d'interfaces de tableau, l'affichage de texte vertical dans les en-têtes peut fournir un aspect esthétique et spatial. solution d'économie. Cependant, y parvenir avec la transformation CSS peut présenter un défi en matière d'ajustement automatique de la hauteur.

Problème :

Lors de l'application de la propriété de transformation CSS pour faire pivoter le texte dans le tableau Dans les en-têtes, la ligne d'en-tête ne parvient souvent pas à ajuster sa hauteur comme requis, ce qui entraîne un débordement de texte.

Solution :

Pour résoudre ce problème et garantir que l'en-tête du tableau grandit au fur et à mesure nécessaire, il est essentiel d’utiliser la propriété CSS writing-mode. Plus précisément, définir le mode d'écriture : vertical-lr ; établira un mode d'écriture vertical, où les lignes sont affichées de gauche à droite.

Cette technique permet à la ligne d'en-tête de s'adapter à la nouvelle disposition verticale du texte, en ajustant sa hauteur pour éviter tout débordement. L'en-tête du tableau ressemblera désormais au design prévu :

[Image de l'en-tête du tableau avec le texte affiché verticalement]

Explication :

Le mode d'écriture La propriété influence l'orientation du texte dans un élément. En le définissant sur vertical-lr, nous indiquons que les lignes de texte doivent être écrites verticalement, les rendant perpendiculaires au flux horizontal par défaut. Cela permet à l'en-tête du tableau de s'adapter à la disposition verticale du texte et de s'étendre selon les besoins.

Ressources supplémentaires :

• Réseau de développeurs Mozilla : [mode écriture] (https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode)

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!