如何在不扭曲儲存格大小的情況下旋轉 HTML 表格中的文字？

使用CSS 旋轉文字並調整HTML 表格中的單元格大小

嘗試旋轉表格單元格中的文字時，也必須考慮這一點，這一點很重要對細胞大小的影響。如提供的範例所示，當使用 CSS 變換來旋轉文字而不調整單元格大小時，結果可能會失真。

要解決此問題，需要調整表格和儲存格樣式。透過設定表格標題的vertical-align：bottom和text-align：center，旋轉後文字可以正確定位。

特別是對於Chrome，有必要將旋轉後的文字包裹在中;元素。這可以確保文字的方向也發生改變，從而防止旋轉後出現水平文字。接著使用-ms-writing-mode：tb-rl、-webkit-writing-mode：vertical-rl、writing-mode：vertical-rl、transform：rotate(180deg) 和white-space：nowrap 設定樣式.

範例程式碼

<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>

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

透過實作這些樣式調整，可以將文字旋轉90 度，同時保持適當的單元大小和格式。

以上是如何在不扭曲儲存格大小的情況下旋轉 HTML 表格中的文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！