html字体纵向排列，使⽤writing-mode让⽂字竖向排版
通常我们⽹页上的⽂字在缺省状况下是从左到右横向排版的，但有些情况下，为了排版效果，或为了更好的利⽤页⾯空间，我们需要将⽂字竖向排版。以前有⼀种很⼟的⽅法，就是让⽂字的容器只有⼀个⽂字的宽度，挤的⽂字竖向排列。在table表头⾥通常会有这种效果。css特效文字
writing-mode是CSS3⾥新引⼊的可以让⽂字竖向排版的属性。它不仅可以让⽂字竖向，还可以让⽂字从右往左排。这个CSS3属性还处在实验阶段，使⽤最新版的⾕歌浏览器或⽕狐浏览器时，最好在属性前⾯加⼊浏览器引擎前缀。
下⾯我们看看writing-mode属性的语法：
/* Keyword values */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
/* Global values */
writing-mode: inherit;
writing-mode: initial;
writing-mode: unset;
writing-mode的⼏个属性值介绍：
horizontal-tb
⽂字从左到右排列，换⾏内容是从上往下扩展。
vertical-rl
⽂字从上到下排列，换⾏内容是从右往左扩展。
vertical-lr
⽂字从上到下排列，换⾏内容从左往右扩展。
sideways-rl
是正常的⽂字内容逆时针旋转90度得到的效果。
sideways-lr
是正常的⽂本内容顺时针旋转90度得到的效果。
下图是设计预期的效果图：
实际执⾏效果是这样的：
上⾯sideways-rl和sideways-lr两个属性⽬前还处于试验阶段，有些浏览器⾥不⼀定有效果。对于这种效果的⽂字排版，我们有很好的替代⽅法，就是使⽤CSS3⾥的变换旋转功能:
.vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
}
实例效果：
writing-mode废弃的属性值
注意：下⾯这些属性是已经废除的writing-mode属性值，如果你在新版浏览器⾥属于这些属性值将没有效果。
lr-tb
tb-rl
lr
rl
tb
⼀个有趣的事情，实验中发现，writing-mode属性在table上设置时，⾕歌浏览器上不起作⽤，⽕狐浏览器上正常。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。