跳转到主内容
趣航编程网 - 趣学编程,启航技术之路!

详解CSS的writing-mode文字排版属性使用的方法

writing-mode经常被用来实现页面文字的竖排,这里我们来系统地看一下详解 css 的writing-mode文字排版属性使用的方法,其中包括一个古诗的例子来展示writing-mode文字竖排用法 语法:
writing-mode : lr-tb | tb-rl
/* 关键字值 */ writing-mode: horizontal-tb; /* 默认值 */ writing-mode: vertical-rl; writing-mode: vertical-lr;
/* 全局值-关键字inherit IE8+,initial和unset IE13才支持 */ writing-mode: inherit; writing-mode: initial; writing-mode: unset;
lr-tb :  默认值。对象中的内容在水平方向上从左向右流入,后一行在前一行的下面。 所有的字形都是竖直向上的。这种布局是罗马语系使用的 tb-rl :  上-下,右-左。对象中的内容在垂直方向上从上向下流入,自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的,半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的 说明: 设置或检索对象的内容块固有的书写方向。西方语言确省的是左-右,上-下的书写方式。但是亚洲语言常有上-下,右-左的书写方式。 当此属性值发生变化时, text-align属性与vertical-align 属性的作用也将发生变化。 对于下列元素来说,样式表属性不可继承: BUTTON CAPTION INPUT INPUT type=button INPUT type=file INPUT type=password INPUT type=reset INPUT type=submit INPUT type=text ISINDEX OPTION TEXTAREA 立即学习 “ 前端免费学习笔记(深入) ”; 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更 下载 此属性效果不会被累积作用。例如,假如父对象的此属性值设为 tb-rl ,子对象的此属性值设为 tb-rl 不会导致子对象的旋转。 假如对象的 writing-mode 属性设置和它的父对象不一样则其将获得自己的布局。那样一个对象的宽度是通过使用它第一个有布局的父对象的高度而确定的。 当你使用具有不同 writing-mode 属性值的对象时,给每一个对象指定确定的尺寸能够让你更好的整体控制它们的布局。 此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。 对应的脚本特性为 writingMode 。 文字的竖排版示例:
.verticle-mode { writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; } /* IE7比较弱,需要做点额外的动作 */ .verticle-mode { *width: 120px; } .verticle-mode h4, .verticle-mode p { *display: inline; *writing-mode: tb-rl; } .verticle-mode h4 { *float:rightright; }
html如下下:

咏柳

碧玉妆成一树高,
万条垂下绿丝绦。
不知细叶谁裁出,
二月春风似剪刀。

我们就可以看到古诗文的竖排了!

相关文章