语法:writing-mode:lr-tb或writing-mode:tb-rl
参数:
1、lr-tb:从左向右,从上往下
2、tb-rl:从上往下,从右向左
运行代码发现,IE显示正常,火狐却不行,所以不建议使用writing-mode属性,下面使用模拟方法实现。
二、模拟文字竖排
代码:
ul{width:100pxheight:80pxoverflow:hiddenlist-style:none}
ul li{float:rightdisplay:inlinemargin-left:4pxwidth:14pxheight:100pxfont-size:14pxword-wrap:break-wordword-break:nomal}
此方法让li右浮动,设置li宽度和字宽度一样都是14px,这样就自动换行了。另外,“word-wrap:break-wordword-break:nomal”这句实现标点自动换行(连续字符自动换行)。
如果单纯针对ie8以下浏览器,css可以使用layout-flow :vertical-ideographic进行竖着显示;其他浏览器如火狐,Chrome等都不支持该css属性,它也不是w3的标准属性;
目前来看,针对竖着排版html文字,没有太好的解决办法,给出的静态文字方案有一个字宽的div,然后都右浮动:
p{ width:1emfont-size:30pxletter-spacing:1emword-break:break-all}
它的问题是文字要固定;
另一种通过js,拆分文字,也弄成一字宽的标签,进行排列(中英文显示也是个问题),但是总的来说,都不是好的解决办法;
html5和css3也没有直接的属性,它只有旋转属性rotate,不过文字都倒着,阅读都很不方便;
分析到最后,都没有好太好方案,尽量少用,实在没办法,尽量用js来模拟控制,竖排文字常见是古代中国书籍排版,如果有一天是国人开发css国际标准,或许会标准性支持它。