让文字竖排有以下三种方法:
一,原始使用writing-mode属性-不推荐。
1,语法:writing-mode:lr-tb或writing-mode:tb-rl;
2,参数:
1、lr-tb:从左向右,从上往下
2、tb-rl:从上往下,从右向左
运行搭局代码发现,IE显示旦隐正常,火狐、谷歌浏览器却不支持,所以不建议使用writing-mode属性。
二、使用CSS模拟文字竖排。
对文字对象宽度设置只能排下一个文字的宽度距离,让文字一行排不下两个文字使其文字自动换行,就形成了竖立排版需求。示例代码如下:
孙败
.name a { display: block; width: 20px; height: 210px;line-height: 16px; cursor: pointer; color: #3588c9; text-align: center; font-weight: bold;white-space: normal;word-wrap: break-word; word-break:break-all;}
.name { float: left; width: 20px; height: 210px; padding: 10px 10px 0 10px; cursor: pointer; background: #fff; }
<余凯逗/style>