内容简介:html中文字的默认排列是横向排列的,但一些特殊情况下是需要文字竖向排列的。
html中文字的默认排列是横向排列的,但一些特殊情况下是需要文字竖向排列的。
单行文字竖向排列
.onecn{
width: 20px;
margin: 0 auto;
line-height: 24px;
}
.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。
扩展:竖排文字动画显示效果(文字从上到下动画显示出来)
end~~~
如有更好方法,欢迎大家留言讨论,谢谢!!
以上所述就是小编给大家介绍的《css实现文字竖排的方式》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Calibre 5.0 发布:高亮、Python 3、暗模式及竖排文字
- 超轻量级中文OCR,支持竖排文字识别、ncnn推理,总模型仅17M
- 巧用flex布局实现左侧文字溢出省略,右侧文字自适应。
- WPF 文字描边
- 网页文字的秘密
- 文字逐个显隐加载效果
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Inside Larry's and Sergey's Brain
Richard Brandt / Portfolio / 17 Sep 2009 / USD 24.95
You’ve used their products. You’ve heard about their skyrocketing wealth and “don’t be evil” business motto. But how much do you really know about Google’s founders, Larry Page and Sergey Brin? Inside......一起来看看 《Inside Larry's and Sergey's Brain》 这本书的介绍吧!