HTML でテキストを左に 90 度回転し、それに応じてセル サイズを調整する方法

HTML のテキストに従ってテキストを左に 90 度回転し、セル サイズを調整する方法

目的の回転効果を実現しながら、それに応じてセル サイズを調整するには、CSS と HTML を組み合わせて使用​​することを検討してください。

CSS ソリューション:

<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 ソリューション:< /h3>

Rotated text by 90 deg.

このソリューションでは次のようになります。


th {vertical-align:bottom;テキスト整列: 中央; }: 回転したテキストをセル内で垂直方向と水平方向に配置します。

番目のスパン { ...writing-mode:vertical-rl; }: テキストの書き込みモードを縦書きに設定し、縦方向に回転できるようにします。 }:
 テキストを左向きに 180 度回転します。

番目のスパン {white-space:nowrap; }:
 テキストが折り返されないようにします。これにより、すべてが 1 行に収まり、それに応じてセル サイズが調整されます。

注:
この解決策では、回転したテキストを  で囲む必要があります。要素。  Chrome は  のテキスト方向の変更をネイティブにサポートしていないため、この要素は Chrome にのみ必要です。要素。
以上がHTML でテキストを左に 90 度回転し、それに応じてセル サイズを調整する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。