通常我们网页上的文字在缺省状况下是从左到右横向排版的, 但有些情况下, 为了排版效果, 或为了更好的利用页面空间, 我们需要将文字竖向排版. 以前有一种很土的方法, 就是让文字的容器只有一个文字的宽度, 挤的文字竖向排列. 在 table 表头里通常会有这种效果.
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 上设置时, 谷歌浏览器上不起作用, 火狐浏览器上正常.
来源: http://www.webhek.com/post/css3-writing-mode.html