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

Text in HTML-Tabellen vertikal drehen

Das Drehen von Text in einer HTML-Tabelle zur Verbesserung der Lesbarkeit durch Platzersparnis kann eine wünschenswerte Funktion für Tabellen mit sein umfangreiche Spaltenüberschriften. Es gibt zwar keine native HTML-Methode zum Erzielen einer Drehung, aber eine vielseitige CSS-basierte Lösung:

<code class="css">.box_rotate {
     -moz-transform: rotate(7.5deg);  /* FF3.5+ */
       -o-transform: rotate(7.5deg);  /* Opera 10.5 */
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
             filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}</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>

Durch Anwenden der Klasse „.box_rotate“ auf eine Tabellenzelle wird deren Text gedreht 7,5 Grad. Sie können den Drehwinkel nach Wunsch anpassen.

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!