如何在 HTML 中將文字向左旋轉 90 度並相應調整儲存格大小？

如何將文字向左旋轉90度並根據HTML中的文字調整儲存格大小

達到你想要的旋轉效果的同時相應地調整單元格大小，請考慮使用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 { 垂直對齊：底部;文字對齊：居中； }: 在單元格內垂直和水平對齊旋轉的文字。
• th span { ...writing-mode:vertical-rl; }: 將文字的書寫模式設為垂直，允許其垂直旋轉。
• th span { transform:rotate(180deg); }: 將文字旋轉 180 度以面向左側。
• th span {white-space: nowrap; }: 防止文字換行，因此它可以全部放在一行上並相應地調整單元格大小。

注意：

此解決方案要求您將旋轉的文字包裝在 中元素。 元素僅對 Chrome 是必需的，因為它本身不支援更改

的文字方向。元素。

以上是如何在 HTML 中將文字向左旋轉 90 度並相應調整儲存格大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！