首頁 > web前端 > css教學 > 如何使用 CSS 轉換旋轉 HTML 表格單元格中的文字?

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

Susan Sarandon
發布: 2024-10-28 08:01:29
原創
908 人瀏覽過

How to Rotate Text in HTML Table Cells Using CSS Transforms?

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板