Comment faire pivoter le texte de 90 degrés vers la gauche en HTML et ajuster la taille des cellules en conséquence ?

Comment faire pivoter le texte de 90 degrés vers la gauche et ajuster la taille des cellules en fonction du texte HTML

Pour obtenir l'effet de rotation souhaité tout en en ajustant la taille des cellules en conséquence, envisagez d'utiliser une combinaison de CSS et HTML.

Solution CSS :

<code class="css">th {
  vertical-align: bottom;
  text-align: center;
}

th span {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}</code>

Solution HTML :< /h3>

<code class="html"><table>
  <tr>
    <th><span>Rotated text by 90 deg.</span></th>
  </tr>
</table></code>

Dans cette solution :

• th { vertical-align: bottom; alignement du texte : centre ; } : Aligne le texte pivoté verticalement et horizontalement dans les cellules.
• th span { ...writing-mode: vertical-rl; } : Définit le mode d'écriture du texte sur vertical, lui permettant de le faire pivoter verticalement.
• th span { transform: rotate(180deg); } : Fait pivoter le texte de 180 degrés pour qu'il soit orienté vers la gauche.
• th span { white-space: nowrap; } : Empêche le texte de s'enrouler, afin qu'il tienne tout sur une seule ligne et ajuste la taille de la cellule en conséquence.

Remarque :

Cette solution nécessite que vous enveloppiez le texte pivoté dans un format élément. Le L'élément n'est nécessaire que pour Chrome car il ne prend pas en charge de manière native la modification de la direction du texte pour é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!