代码改变世界

css文字竖排

2012-02-17 17:48  边缘er  阅读(415)  评论(0)  编辑  收藏  举报

语法：writing-mode : lr-tb、tb-rl<br />
参数：lr-tb：从左向右，从上往下 　tb-rl：从上往下，从右向左
但除了ie，其他浏览器基本不支持，我们可以用其他方法模拟一下，

<style>
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;}
</style>
<body>
<ul>
    <li>大刘大刘，</li>
    <li>寂寞不愁。</li>
    <li>人有女人，</li>
    <li>我有大刘。</li>
</ul>

此方法让li右浮动，设置Li宽度和字宽度一样都是14Px，这样就自动换行了。word-wrap:break-word; word-break:nomal;这句实现标点换行。