如何使用 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中文网其他相关文章！