文字排版

2019-11-05 08:56:12 -0500

使用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)

«Newer      Older»
Comment:
Name:

Back to home

Subscribe | Register | Login | N