recherche

Maison >interface Web >tutoriel CSS >Comment faire pivoter le texte verticalement dans les tableaux HTML à l'aide de CSS ?

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

DDD
DDDoriginal
2024-10-27 08:26:03813parcourir

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>

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>

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!

css html for while using class this display transform table
Déclaration：
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
Article précédent：Comment obtenir un comportement correct de glisser/redimensionner jQuery avec l'échelle de transformation CSS ?Article suivant：Comment obtenir un comportement correct de glisser/redimensionner jQuery avec l'échelle de transformation CSS ?

Articles Liés

Voir plus