Heim > Artikel > Web-Frontend > Wie drehe ich Text in HTML-Tabellen mithilfe von CSS vertikal?

Wie drehe ich Text in HTML-Tabellen mithilfe von CSS vertikal?

DDDOriginal: 2024-10-27 08:26:03721Durchsuche

How to Rotate Text Vertically in HTML Tables Using CSS?

Vertikaler Text in HTML-Tabellen

Viele HTML-Tabellenzellen enthalten Überschriften, die viel Platz beanspruchen. Um Platz zu sparen, können Sie den Text vertikal drehen. Hier ist eine tragbare Lösung, um dies zu erreichen:

CSS-Transformationsmethode

Diese Methode nutzt CSS-Transformationen, um den Text zu drehen. Es unterstützt verschiedene Browser und bietet eine plattformübergreifende Lösung. Hier ist der CSS-Code:

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

HTML-Verwendung

Um die Drehung zu verwenden, wickeln Sie den Text einfach in ein

ein. Element und wenden Sie die CSS-Klasse .box_rotate an. Hier ist ein Beispiel:

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

Bei der Implementierung werden der erste und dritte

-Elemente zeigen Text horizontal an, während das zweite

-Element (mit der Klasse .box_rotate) zeigt Text an, der um 7,5 Grad gegen den Uhrzeigersinn gedreht ist.

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

css html for while using class this display transform 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

Vorheriger Artikel：Wie erreicht man mit der CSS-Transformationsskala das korrekte jQuery-Zieh-/Größenänderungsverhalten?Nächster Artikel：Wie erreicht man mit der CSS-Transformationsskala das korrekte jQuery-Zieh-/Größenänderungsverhalten?

In Verbindung stehende Artikel

Mehr sehen