Wie drehe ich Text in HTML-Tabellen mithilfe von CSS vertikal?-CSS-Tutorial-php.cn

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!

Quelle：php.cn

Vorheriger Artikel：Wie erreicht man mit der CSS-Transformationsskala das korrekte jQuery-Zieh-/Größenänderungsverhalten? Nächster Artikel：Wie kann ich CSS-Selektoren verwenden, um auf Elemente abzuzielen, deren IDs bestimmten Text enthalten und mit einer bestimmten Zeichenfolge enden?

Erklärung dieser Website

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

Neueste Artikel des Autors