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

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>

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>

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!

css css3 html for using class this display transform column table

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn