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

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>

HTML-Lösung:< /h3>

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

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!