如何使用 CSS 在 HTML 表格中垂直旋轉文字？

在 HTML 表格中垂直旋轉文字

可以使用 CSS 轉換來實現將 HTML 表格單元格中的文字垂直旋轉 90°。此方法可應用於文字標題和常規表格單元格，在容納充足文字的同時優化空間利用率。

CSS 轉換技術：

CSS 轉換屬性可以啟用操縱元素的視覺特徵，包括旋轉。以下是用於旋轉文字的CSS 程式碼段：

<code class="css">.box_rotate {
    -moz-transform: rotate(7.5deg);  /* FF3.5+ */
    -o-transform: rotate(7.5deg);  /* Opera 10.5 */
    -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}</code>

HTML 實作：

要在表格單元格內垂直對齊文本，請將CSS 類別分配給適當的HTML 元素:

<code class="html"><div class="box_rotate">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div></code>

瀏覽器支援：

CSS 轉換和過濾技術確保跨瀏覽器相容性：

• Firefox 3.5
• Opera 10.5
• Safari 3.1
• Chrome
• Internet Explorer 6-8

7.5 度的旋轉角度最適合可讀性。但是，您可以對其進行調整以滿足您的特定要求。

其他觀察：

包含 CSS 前綴以獲得更廣泛的瀏覽器支援。

確保受影響的元素有足夠的高度來容納旋轉的文字。

• 旋轉單元格內的文字對齊方式可能會略有不同，具體取決於所使用的瀏覽器和字體。

以上是如何使用 CSS 在 HTML 表格中垂直旋轉文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！