CSS 文字竖排技巧

实现网页文字竖排的方法有很多，先来看看CSS 样式表中提供的两种文字竖排的方法：

writing-mode （IE5.5+专有属性）

语法：

writing-mode : lr-tb | tb-rl

参数：

lr-tb : 左-右，上-下
tb-rl : 上-下，右-左

另一种是用：

layout-flow （IE5.5+专有属性）

语法：

layout-flow : horizontal | vertical-ideographic

参数：

horizontal : 对象中的内容自左边流入。下一行在前一行下面。这个值适于拉丁语系
vertical-ideographic : 对象中的内容自上而下流入，下一行在前一行左面。这个值适于亚洲语系

但这两种方法都只是 IE 支持，而且效果也不太好控制。除非之外，还可以用
或使用图片来实现文字竖排。

下面这种方法是比较好的，推荐使用：

>
	#vertical div { width:1.5em; float:right; }
	#vertical .title { font-size:xx-large; font-weight:bold; line-height:1em; }
>
="vertical">
    
="title">水调歌头>  
    >　>  
    >苏轼>  
    >　>  
    >明月几时有>  
    >把酒问青天>  
    >不知天上宫阙>  
    >今夕是何年>  
    >我欲乘风归去>  
    >又恐琼楼玉宇>  
    >高处不胜寒>  
    >起舞弄清影>  
    >何似在人间>  
    >　>  
    >转朱阁>  
    >低绮户>  
    >照无眠>  
    >不应有恨>  
    >何事长向别时圆>  
    >人有悲欢离合>  
    >月有阴晴圆缺>  
    >此事古难全>  
    >但愿人长久>  
    >千里共婵娟>
>

效果：

水调歌头

　

苏轼

　

明月几时有

把酒问青天

不知天上宫阙

今夕是何年

我欲乘风归去

又恐琼楼玉宇

高处不胜寒

起舞弄清影

何似在人间

　

转朱阁

低绮户

照无眠

不应有恨

何事长向别时圆

人有悲欢离合

月有阴晴圆缺

此事古难全

但愿人长久

千里共婵娟

代码规范，浏览器兼容性好，而且能很好地复制内容。博盈时代

原文：http://www.fufuok.com/css-vertical-text/