当前位置:  开发笔记 > 编程语言 > 正文

HTML表格中的垂直(旋转)文本

如何解决《HTML表格中的垂直(旋转)文本》经验,为你挑选了3个好方法。

是否有(便携式)方法将HTML表格单元格中的文本旋转90°?

(我有一个包含许多列和大量文本的表格,所以我想垂直写它以节省空间.)



1> Álvaro Gonzá..:

.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 */
    }
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.
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.
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.


2> Nathan Long..:

替代解决方案?

而不是旋转文本,是否可以将其写成"从上到下?"

像这样:

S  
O  
M  
E  

T  
E  
X  
T  

我认为这会容易得多 - 你可以分开一串文字并在每个角色后插入一个换行符.

这可以通过浏览器中的JavaScript来完成,如下所示:

"SOME TEXT".split("").join("\n")

...或者您可以在服务器端执行此操作,因此它不依赖于客户端的JS功能.(我认为这是"便携式"的意思吗?)

用户也不必将他/她的头部侧向阅读.:)

更新

这个线程是用jQuery做的.



3> 小智..:

在原来的答案和我之前在IE8系列上的答案中引用了一个引用它,就在分号附近.Yikes和BAAAAD!下面的代码正确设置了旋转并且有效.您必须在IE中浮动才能应用过滤器.

Count & Value
;


+1指出浮动的必要性,以便在IE中工作.
推荐阅读
手机用户2402851155
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有