css中关于writing-mode属性文字书写方向以及兼容写法详解（图）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css中关于writing-mode属性文字书写方向以及兼容写法详解（图），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1895字，纯文字阅读大概需要3分钟。

内容图文

writing-mode介绍

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浏览器：

IE浏览器：

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属性中只能采用这三个排列方式。

从上面的截图，我们可以看到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;
}
 
<div class="wrtmod">
    静夜思<br/>
    窗前明月光<br/>
    疑是地上霜<br/>
    举头望明月<br/>
    低头思故乡
</div>

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

以上就是css中关于writing-mode属性文字书写方向以及兼容写法详解（图）的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的css中关于writing-mode属性文字书写方向以及兼容写法详解（图）全部内容，希望文章能够帮你解决css中关于writing-mode属性文字书写方向以及兼容写法详解（图）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端