Maison > interface Web > tutoriel CSS > le corps du texte

Comment faire pivoter le texte dans les cellules d'un tableau HTML à l'aide de transformations CSS ?

Susan Sarandon
Libérer: 2024-10-28 08:01:29
original
772 Les gens l'ont consulté

How to Rotate Text in HTML Table Cells Using CSS Transforms?

Rotation du texte dans les cellules d'un tableau HTML

Les tableaux HTML étant largement utilisés pour organiser et afficher des données tabulaires, la possibilité de faire pivoter le texte dans leur les cellules peuvent être bénéfiques dans des situations où l'espace est limité, en particulier pour les titres longs.

Utilisation des transformations CSS

Une solution robuste et portable pour faire pivoter le texte dans les tableaux HTML consiste à utiliser CSS se transforme. En utilisant les propriétés de transformation CSS3, vous pouvez réaliser des rotations de 90 degrés sans compromettre la disposition ou la fonctionnalité de la cellule. Le code CSS suivant montre comment faire pivoter le texte de 7,5 degrés :

<code class="css">.box_rotate {
    -moz-transform: rotate(7.5deg);
    -o-transform: rotate(7.5deg);
    -webkit-transform: rotate(7.5deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
}</code>
Copier après la connexion

Exemple de mise en œuvre

Pour illustrer la mise en œuvre, considérons le code HTML suivant :

<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

Dans cet exemple, la classe box_rotate est appliquée au deuxième

, faisant pivoter son texte de 7,5 degrés. En conséquence, le texte de cette cellule spécifique est rendu verticalement, aligné verticalement dans la colonne du 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!

source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!