css实现文字竖排结果
发布时间:09/01 来源:未知 浏览:
关键词:
html中文字的默许摆列是横向摆列的,但一些非凡状况下是需要文字竖向摆列的。
单行文字竖向摆列
.onecn{ width: 20px; margin: 0 auto; line-height: 24px; }
(引荐教程:CSS入门教程)
.oneen{ width: 15px; margin: 0 auto; line-height: 24px; font-size: 20px; word-wrap: break-word;/*英文的时候需要加上这句,主动换行*/ word-break:break-all; }
说明:实现文字单行竖向摆列,只需要把宽度设定为恰好容纳一个字体的宽度即可。
多行文字竖向摆列
.two{ margin: 0 auto; height: 140px; writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/ writing-mode: tb-lr;/*IE阅读器的从左向右 从右向左是 writing-mode: tb-rl;*/ }
说明:高度很重要,假如需要操纵文字的间距和行距,可以增加属性letter-spacing和line-height。
相关视频教程引荐:css视频教程
以上就是css实现文字竖排结果的具体内容,更多请关注百分百源码网其它相关文章!