兼容火狐和IE的CSS竖排文字代码

writing-mode的兼容性

image

1.writing-mode（设置对象书写方向）

语法：writing-mode : lr-tb、tb-rl
参数：lr-tb：从左向右，从上往下 　tb-rl：从上往下，从右向左

div{
  writing-mode:tb-rl;
}

2.layout-flow（设置对象书写方向）

语法：layout-flow:vertical-ideographic

div{
  layout-flow:vertical-ideographic;
}

3..text-align（设置对象中文本的对齐方式）

语法：text-align : left、right、center、justify
参数：left：左对齐　　right：右对齐　　center：居中　　justify：两端对齐

div{
  text-aligin:center;
} 

4.模拟文字竖排

ul{
  width:100px;
  height:80px;
  overflow:hidden;
  list-style:none;
}
ul li{
  float:right;
  display:inline;
  margin-left:4px;
  width:14px;
  height:100px;
  font-size:14px;
  word-wrap:break-word;
  word-break:nomal;
}

原理：此方法让li右浮动，设置li宽度和字宽度一样都是14px，这样就自动换行了。另外，“word-wrap:break-word;word-break:nomal;”这句实现标点自动换行（连续字符自动换行）。