今天需要实现文字的竖排版，网上搜了搜果然还有，实现起来也非常简单。
只用于ie的方法
1. writing-mode（设置对象书写方向）
语法：writing-mode : lr-tb、tb-rl
参数：lr-tb：从左向右，从上往下 tb-rl：从上往下，从右向左
示例：div { writing-mode: tb-rl; }
2. text-align（设置对象中文本的对齐方式）
语法：text-align : left、right、center、justify
参数：left：左对齐 right：右对齐 center：居中 justify：两端对齐
示例：div { text-align : center; }
例子：
<html>
<head>
<title>竖排文字</title>
<style type="text/css">
.tbrl {Writing-mode:tb-rl;Text-align:right;font-size:9pt}
</style>
</head>
<body>
<div class="tbrl">
南唐 李 煜
春花秋月何時了
往事知多少
小樓昨夜又東風
故國不堪回首月明中
雕闌玉砌應猶在
只是朱顏改
問君能有幾多愁
恰似一江春水向東流
</body>
</html>
适用于主流浏览器
<html>
<head>
<title>竖排文字</title>
</head>
<body>
<div style="font-size:xx-large;font-weight:bold;line-height:1em;width:1.5em; float:right;">虞 美 人
</div>
<div style="width:1.5em; float:right;"> </div>
<div style="width:1.5em; float:right;">南唐 李 煜 </div>
<div style="width:1.5em; float:right;">春花秋月何時了</div>
<div style="width:1.5em; float:right;">往事知多少 </div>
<div style="width:1.5em; float:right;">小樓昨夜又東風 </div>
<div style="width:1.5em; float:right;">故國不堪回首月明中</div>
<div style="width:1.5em; float:right;">雕闌玉砌應猶在 </div>
<div style="width:1.5em; float:right;">只是朱顏改</div>
<div style="width:1.5em; float:right;">問君能有幾多愁 </div>
<div style="width:1.5em; float:right;">恰似一江春水向東流 </div>
</body>
</html>
2240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
