Wie drehe ich Text in HTML-Tabellenzellen mithilfe von CSS-Transformationen?-CSS-Tutorial-php.cn

Wie drehe ich Text in HTML-Tabellenzellen mithilfe von CSS-Transformationen?

Susan Sarandon

Freigeben： 2024-10-28 08:01:29

Original

908 Leute haben es durchsucht

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

Text in HTML-Tabellenzellen drehen

Da HTML-Tabellen häufig zum Organisieren und Anzeigen von Tabellendaten verwendet werden, besteht die Möglichkeit, Text darin zu drehen Zellen können in Situationen mit begrenztem Platz, insbesondere bei langen Überschriften, von Vorteil sein.

Verwendung von CSS-Transformationen

Eine robuste und tragbare Lösung zum Drehen von Text in HTML-Tabellen ist CSS verwandelt. Durch den Einsatz von CSS3-Transformationseigenschaften können Sie 90-Grad-Rotationen erreichen, ohne das Layout oder die Funktionalität der Zelle zu beeinträchtigen. Der folgende CSS-Code zeigt, wie Text um 7,5 Grad gedreht wird:

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

Nach dem Login kopieren

Beispielimplementierung

Um die Implementierung zu veranschaulichen, betrachten Sie den folgenden HTML-Code:

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

Nach dem Login kopieren

In diesem Beispiel wird die Klasse box_rotate auf das zweite

angewendet und dessen Text um 7,5 Grad gedreht. Dadurch wird der Text in dieser bestimmten Zelle vertikal gerendert und vertikal innerhalb der Tabellenspalte ausgerichtet.

Das obige ist der detaillierte Inhalt vonWie drehe ich Text in HTML-Tabellenzellen mithilfe von CSS-Transformationen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!