CSS writing-mode与文字垂直排版实例页面
回到相关文章 »代码:
CSS代码:
.verticle-mode { writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; } /* IE7比较弱,需要做点额外的动作 */ .verticle-mode { *width: 120px; } .verticle-mode h4, .verticle-mode p { *display: inline; *writing-mode: tb-rl; } .verticle-mode h4 { *float:right; }
HTML代码:
<h4>咏柳</h4> <p>碧玉妆成一树高,<br>万条垂下绿丝绦。<br>不知细叶谁裁出,<br>二月春风似剪刀。</p> <div class="verticle-mode"> <h4>咏柳</h4> <p>碧玉妆成一树高,<br>万条垂下绿丝绦。<br>不知细叶谁裁出,<br>二月春风似剪刀。</p> </div>
效果:
咏柳
碧玉妆成一树高,
万条垂下绿丝绦。
不知细叶谁裁出,
二月春风似剪刀。
咏柳
碧玉妆成一树高,
万条垂下绿丝绦。
不知细叶谁裁出,
二月春风似剪刀。