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

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

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

• th {vertical-align:bottom;テキスト整列: 中央; }: 回転したテキストをセル内で垂直方向と水平方向に配置します。
• 番目のスパン { ...writing-mode:vertical-rl; }: テキストの書き込みモードを縦書きに設定し、縦方向に回転できるようにします。 }:
テキストを左向きに 180 度回転します。
• 番目のスパン {white-space:nowrap; }:
テキストが折り返されないようにします。これにより、すべてが 1 行に収まり、それに応じてセル サイズが調整されます。

• 注:

この解決策では、回転したテキストを で囲む必要があります。要素。 Chrome は のテキスト方向の変更をネイティブにサポートしていないため、この要素は Chrome にのみ必要です。要素。

以上がHTML でテキストを左に 90 度回転し、それに応じてセル サイズを調整する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。