Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie drehe ich Text in HTML um 90 Grad nach links und passe die Zellengröße entsprechend an?

Mary-Kate Olsen
Freigeben: 2024-10-30 05:28:02
Original
171 Leute haben es durchsucht

How to Rotate Text Left 90 Degrees in HTML and Adjust Cell Size Accordingly?

So drehen Sie Text um 90 Grad nach links und passen die Zellengröße entsprechend dem Text in HTML an

Um gleichzeitig den gewünschten Rotationseffekt zu erzielen Passen Sie die Zellengrößen entsprechend an. Erwägen Sie die Verwendung einer Kombination aus CSS und HTML.

CSS-Lösung:

<code class="css">th {
  vertical-align: bottom;
  text-align: center;
}

th span {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}</code>
Nach dem Login kopieren

HTML-Lösung:< /h3>

<code class="html"><table>
  <tr>
    <th><span>Rotated text by 90 deg.</span></th>
  </tr>
</table></code>
Nach dem Login kopieren

In dieser Lösung:

  • th { Vertical-align: Bottom; Textausrichtung: Mitte; }: Richtet den gedrehten Text vertikal und horizontal innerhalb der Zellen aus.
  • th span { ...writing-mode: Vertical-rl; }: Setzt den Schreibmodus des Textes auf vertikal, sodass er vertikal gedreht werden kann.
  • th span { transform: rotate(180deg); }: Dreht den Text um 180 Grad nach links.
  • th span { white-space: nowrap; }: Verhindert, dass der Text umbrochen wird, sodass er vollständig in eine Zeile passt, und passt die Zellengröße entsprechend an.

Hinweis:

Diese Lösung erfordert, dass Sie den gedrehten Text in ein umschließen. Element. Die -Element ist nur für Chrome erforderlich, da es das Ändern der Textrichtung für nicht nativ unterstützt. Elemente.

Das obige ist der detaillierte Inhalt vonWie drehe ich Text in HTML um 90 Grad nach links und passe die Zellengröße entsprechend an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!