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

HTML 表格中的垂直文字

許多 HTML 表格儲存格包含佔用大量空間的標題。為了節省空間，您可以考慮垂直旋轉文字。這是實現此目的的便攜式解決方案：

CSS 轉換方法

此方法利用 CSS 轉換來旋轉文字。它支援各種瀏覽器並提供跨平台的解決方案。 CSS 程式碼如下：

<code class="css">.box_rotate {
  -moz-transform: rotate(7.5deg); /* Firefox 3.5+ */
  -o-transform: rotate(7.5deg); /* Opera 10.5 */
  -webkit-transform: rotate(7.5deg); /* Safari 3.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 類別 .box_rotate。這是一個範例：

<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中文網其他相關文章！