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

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

893 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!