css文字竖排效果  

一、用layout-flow
　　　　layout-flow（设置对象书写方向）
　　
　　　　语法：layout-flow:vertical-ideographic
　　　　示例：div { layout-flow:vertical-ideographic; }
　　
　　轻轻的

　　我走了

　　就如我轻轻的来

　　挥一挥袖子

　　不带走一个女孩

　　哎哟……

　　怎么把这么经典的句子改成这样了

　　
　　
　　二、用writing-mode和text-align
　　
　　 1.writing-mode（设置对象书写方向）
　　
　　　　语法：writing-mode : lr-tb、tb-rl
　　　　参数：lr-tb：从左向右，从上往下 　tb-rl：从上往下，从右向左
　　　　示例：div { writing-mode: tb-rl; }
　　
　　 2.text-align（设置对象中文本的对齐方式）
　　
　　　　语法：text-align : left、right、center、justify
　　　　参数：left：左对齐　　right：右对齐　　center：居中　　justify：两端对齐
　　　　示例：div { text-align : center; }

文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: 文字文字 竖排竖排 效果效果
相关日志: