Comment faire pivoter le texte verticalement dans les tableaux HTML à l'aide de CSS ?-tutoriel CSS-php.cn

Comment faire pivoter le texte verticalement dans les tableaux HTML à l'aide de CSS ?

DDD

Libérer： 2024-10-27 08:26:03

original

805 Les gens l'ont consulté

How to Rotate Text Vertically in HTML Tables Using CSS?

Texte vertical dans les tableaux HTML

De nombreuses cellules de tableau HTML contiennent des titres qui occupent un espace important. Pour économiser de l'espace, vous pouvez envisager de faire pivoter le texte verticalement. Voici une solution portable pour y parvenir :

Méthode de transformation CSS

Cette méthode utilise des transformations CSS pour faire pivoter le texte. Il prend en charge différents navigateurs et fournit une solution multiplateforme. Voici le code CSS :

<code class="css">.box_rotate {
  -moz-transform: rotate(7.5deg); /* Firefox 3.5+ */
  -o-transform: rotate(7.5deg); /* Opera 10.5 */
  -webkit-transform: rotate(7.5deg); /* Safari 3.1+, Chrome */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6, IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}</code>

Copier après la connexion

Utilisation HTML

Pour utiliser la rotation, enveloppez simplement le texte dans un

élément et appliquez la classe CSS .box_rotate. Voici un exemple :

<code class="html"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>

<div class="box_rotate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div></code>

Copier après la connexion

Une fois mis en œuvre, le premier et le troisième

les éléments afficheront le texte horizontalement, tandis que le deuxième élément

L'élément (avec la classe .box_rotate) affichera le texte qui pivote de 7,5 degrés dans le sens inverse des aiguilles d'une montre.

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!

source：php.cn

Article précédent：Comment obtenir un comportement correct de glisser/redimensionner jQuery avec l'échelle de transformation CSS ? Article suivant：Comment puis-je utiliser des sélecteurs CSS pour cibler des éléments dont les ID contiennent un texte spécifique et se terminent par une chaîne spécifique ?

Déclaration de ce site Web

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

Derniers articles par auteur