Wie kann ich vertikalen Text in Tabellenüberschriften mit dynamischer Höhe und ohne Überlauf anzeigen?

Vertikalen Text in Tabellenüberschriften mit dynamischer Höhe und ohne Überlauf anzeigen

Um gedrehten Text als Tabellenüberschriften mithilfe der CSS-Transformationseigenschaft anzuzeigen, gibt es Eine Herausforderung besteht darin, zu verhindern, dass gedrehter Text überläuft, wenn die Höhe der Kopfzeile angepasst werden muss.

Problem:

Bei Verwendung der CSS-Transformationseigenschaft:

transform: rotate(-90deg);

Um den Kopfzeilentext zu drehen, bleibt die Kopfzeile auf ihrer ursprünglichen Höhe, was zum Überlauf von gedrehtem Text führt:

[Bild des falschen Beispiels]

Lösung:

Damit die Kopfzeile nach Bedarf wachsen kann, verwenden Sie die CSS-Eigenschaft:

writing-mode: vertical-lr;

Erklärung:

Schreibmodus-Steuerelemente die Schreibrichtung des Textes. Der Wert Vertical-lr gibt an, dass der Text vertikal von links nach rechts geschrieben werden soll. Dadurch wird sichergestellt, dass der gedrehte Text in den vertikalen Raum der Kopfzelle passt, sodass die Höhe der Kopfzeile entsprechend angepasst werden kann.

[Bild des richtigen Beispiels]

Beispielcode:

th {
  writing-mode: vertical-lr;
  transform: rotate(-90deg);
}

Das obige ist der detaillierte Inhalt vonWie kann ich vertikalen Text in Tabellenüberschriften mit dynamischer Höhe und ohne Überlauf anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!