CSS3使用writing-mode让文字自上而下，自右向左排列

通常我们网页上的文字在缺省状况下是从左到右横向排版的，但有些情况下，为了排版效果，或为了更好的利用页面空间，我们需要将文字竖向排版。

-moz-     /* 火狐等使用Mozilla浏览器引擎的浏览器 */
-webkit-  /* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */
-o-       /* Opera浏览器(早期) */
-ms-      /* Internet Explorer (不一定) */ 

/* 文字从左到右排列，换行内容是从上往下扩展。 */
.Text1 {
  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode: horizontal-tb;
}
/* 文字从上到下排列，换行内容从左往右扩展。 */
.Text2 {
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
}
/* 文字从上到下排列，换行内容是从右往左扩展。 */
.Text3 {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
}
/* 是正常的文字内容逆时针旋转90度得到的效果。 */
.Text4 {  
  -webkit-writing-mode: sideways-lr;
  -ms-writing-mode: sideways-lr;
  writing-mode: sideways-lr;
}
/* 是正常的文本内容顺时针旋转90度得到的效果。 */
.Text5 {  
  -webkit-writing-mode: sideways-rl;
  -ms-writing-mode: sideways-rl;
  writing-mode: sideways-rl;
}

上面sideways-rl和sideways-lr两个属性目前还处于试验阶段，有些浏览器里不一定有效果。对于这种效果的文字排版，我们有很好的替代方法，就是使用CSS3里的变换旋转功能:

.vertical-text {
	transform: rotate(90deg);
	transform-origin: left top 0;
}