兼容火狐和IE的CSS竖排文字代码
2020-07-06 本文已影响0人
_孙小胖
writing-mode的兼容性

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;”这句实现标点自动换行(连续字符自动换行)。