一、使用writing-mode属性
语法：writing-mode:lr-tb或writing-mode:tb-rl
参数：
1、lr-tb：从左向右，从上往下
2、tb-rl：从上往下，从右向左
代码：
| p{width:100px;height:80px;writing-mode:tb-rl;} |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<style type="text/css">
p{width:100px;height:80px;writing-mode:tb-rl;}</style>
<title>无标题文档</title>
</head>
<body>
<p>一起学编程网</p>
</body>
</html>
|
运行代码发现，IE显示正常，火狐却不行，所以不建议使用writing-mode属性，下面使用模拟方法实现。
二、模拟文字竖排
代码：
|
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;”这句实现标点自动换行（连续字符自动换行）。
示例：
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<style type="text/css">
ul{width:100px;height:80px;overflow:hidden;list-style:none;}\nul li{float:right;display:inline;margin-left:4px;width:14px;height:100px;font-size:14px;word-wrap:break-word;word-break:nomal;}</style>
<title>一起学编程网www.zftb.cn</title>
</head>
<body>
<ul>
<li>一起学编程网</li>
<li>一起学编程网</li>
<li>一起学编程网</li>
<li>一起学编程网</li>
</ul>
</body>
</html>
|