如何使用 CSS 轉換旋轉 HTML 表格單元格中的文字？

在HTML 表格單元格中旋轉文字

由於HTML 表格廣泛用於組織和顯示表格數據，因此能夠在HTML 表格單元格中旋轉文字單元格在空間有限的情況下很有用，特別是對於冗長的標題。

利用 CSS 轉換

在 HTML 表格中旋轉文字的強大且可移植的解決方案是透過 CSS轉變。透過使用 CSS3 變換屬性，您可以實現 90 度旋轉，而不會影響單元格的佈局或功能。以下CSS 程式碼示範如何將文字旋轉7.5 度：

<code class="css">.box_rotate {
    -moz-transform: rotate(7.5deg);
    -o-transform: rotate(7.5deg);
    -webkit-transform: rotate(7.5deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
}</code>

範例實作

為了說明實現，請考慮以下HTML 程式碼：

<code class="html"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div class="box_rotate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div></code>

在此範例中，box_rotate 類別套用於第二個

，將其文字旋轉7.5 度。因此，該特定單元格中的文字會垂直呈現，並在表格列內垂直對齊。

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