首页 > web前端 > css教程 > 如何使用 CSS 垂直旋转 HTML 表格中的文本?

如何使用 CSS 垂直旋转 HTML 表格中的文本?

Patricia Arquette
发布: 2024-10-27 00:44:02
原创
1011 人浏览过

How to Rotate Text in HTML Tables Vertically Using CSS?

垂直旋转 HTML 表格中的文本

旋转 HTML 表格中的文本以通过节省空间来提高可读性对于具有以下功能的表格来说是一项理想的功能:广泛的列标题。虽然没有原生 HTML 方法来实现旋转,但有一个基于 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>
登录后复制
<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
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板