使用writing-mode让文字竖向排版 通常我们网页上的文字在缺省状况下是从左到右横向排版的，但有些情况下，为了排版效果，或为了更好的利用页面空间，我们需要将文字竖向排版。以前有一种很土的方法，就是让文字的容器只有一个文字的宽度，挤的文字竖向排列。在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上设置时，谷歌浏览器上不起作用，火狐浏览器上正常。 阅读余下内容 标签：writing-mode竖向排版 分享： 相关文章： 从谷歌网站上下载离线安装版谷歌浏览器的方法 升级Node.js的新方法：n 升级工具 理解 JavaScript Async/Await 新语法 对代码语法高亮插件Prism的一点修改 DataList：HTML5中的input输入框自动提示宝器 为什么WordPress面对404攻击会如此脆弱 多层嵌套的CSS 3D动画技术详解 如何修改手机浏览器地址栏和手机系统状态栏的主题颜色 IndexedDB:浏览器里内置的数据库 Javascript缓存API 巧妙运用CSS中的负值 颜色表及html代码 纯 CSS 作品，没有图片和JavaScript，你能相信吗？ 用什么linux命令能够显示一个文件目录或多个目录的体积大小？ 在使用SQLite3时遇到的几个坑 在每个浏览器中看起来都不一样的div 如何解决在安卓手机上安装MySQL遇到Permission denied的问题 前端技术展示：一百种时钟 在手机上安装Ubuntu、PHP环境、CUPS、爱普生R330打印机驱动纪要 发表评论 电子邮件地址不会被公开。 必填项已用*标注 评论 姓名 * 站点 电子邮件 * 你对颜色敏感吗？过不了16关就不要再玩手机了！ 趣味游戏：请画一个小人 HTML5旋转拼图智力游戏 动画展示计算机迷宫路径各种搜索算法 中文版濒危动物CSS碎片拼图 HTML5小游戏：蓝色拼图 CSS颜色混合模式 你能相信吗？这些都是由一个DIV元素实现的动画，纯CSS3技术 HTML5+CSS3特效幻灯片(impress.js)