css 的writing-mode据说是为了中文,日文等方块文字设计的,用来修改文字的书写方向,通过这个属性可以实现文字从右向左的布局,或者从上向下的布局。
writing-mode使用
.wrtmod{
margin:15px;
padding:15px;
border:1px solid #bababa;
background:#f1f1f1;
font-size:15px;
writing-mode:vertical-rl;
writing-mode: tb-rl;
}效果如下:
chrome浏览器:

立即学习“前端免费学习笔记(深入)”;

writing-mode的属性值有:horizontal-tb,vertical-lr,vertical-rl,对应的IE下的值为:lr-tb,tb-lr,tb-rl。
horizontal-tb是默认值。writing-mode的属性值用中划线分割,可以记作XX-OO, horizontal-tb表示文字横向排列,行上下排列,veritcal-rl表示文字上下排列,行从右向左排列。IE的lr-tb表示文字从左到有排列,行从上向下排列,tb-rl表示文字上下排列,行从优向左排列。lr是left,right的首字母缩写,tb是top,bottom首字母的缩写。IE下面还可以使用诸如bt-rl,lr-bt等属性值,排列方式更加丰富。但是为了兼容性在writing-mode属性中只能采用这三个排列方式。
Angel工作室企业网站管理系统全DIV+CSS模板,中英文显示,防注入sql关键字过滤,多浏览器适应,完美兼容IE6-IE8,火狐,谷歌等符合标准的浏览器,模板样式集中在一个CSS样式中,内容与样式完全分离,方便网站设计人员开发模板与管理。系统较为安全,以设计防注入,敏感字符屏蔽。新闻,产品,单页独立关键字设计,提高搜索引擎收录。内置IIS测试,双击打启动预览网站 Angel工作室企业网站
从上面的截图,我们可以看到writing-mode不只改变了文字的书写方向,而且容器的布局方式也随之改变了。chrome,FireFox浏览器下div呈现了inline的特性,
IE8浏览器整个div由横向转为纵向,拥有了高度自适应的特性。
writing-mode的用途一般也就是用在一些诗句的纵向显示,或者一些复古效果的页面上,但是要注意IE8与其他浏览器的不同,它没有呈现inline的特性,所以我们要通过display:inline-block来实现IE下的效果。
.wrtmod{
margin:15px;
padding:15px;
border:1px solid #bababa;
background:#f1f1f1;
font-size:15px;
writing-mode:vertical-rl;
writing-mode:tb-rl;
text-align:center;
line-height:32px;
letter-spacing: 12px;
display: inline-block;
}
.wrtmod:first-line{
font-weight:bold;
color:#0C58A7;
font-size:18px;
}
静夜思
窗前明月光
疑是地上霜
举头望明月
低头思故乡
效果如下:

writing-mode改变了书写模式后,使用text-align:center就可以实现上下居中。上面效果使用了letter-spacing和::first-line伪类,再结合write-mode就实现了一首古诗的书写效果。









