有时候网页中的文字因为特别要求不能横向显示，这时候所需要的就是让文字来竖排显示，那么，网页中如何让文字竖排显示呢？接下来本篇文章将介绍css实现文字竖排显示的方法。
css文字竖排显示的方法一：
使用writing-mode属性
语法：writing-mode:lr-tb或writing-mode:tb-rl
参数：lr-tb：从左向右，从上往下；tb-rl：从上往下，从右向左。
nbsp;html>test .one { margin: 0 auto; height: 140px; writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/ writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/ }十轮霜影转庭梧，此夕羁人独向隅。未必素娥无怅恨，玉蟾清冷桂花孤。
登录后复制
css文字竖排显示效果如下：
这种方法兼容性不好，只有在IE浏览器中才能支持，所以并不推荐使用，这里就不过多介绍要想了解更多可以参考css在线手册。
立即学习“前端免费学习笔记（深入）”；
css文字竖排显示的方法二：
对文字对象宽度设置只能排下一个文字的宽度距离，让文字一行排不下两个文字使其文字自动换行，就形成了竖立排版需求。
nbsp;html>test .one { width: 52px; margin: 0 auto; line-height: 56px; font-size: 50px;}中秋月
登录后复制
注意：word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/
说明：对文字DIV设置较小的宽度，以达到一排只能排下一个文字，这样文字就自动换行，实现垂直竖列排版。
css文字竖排显示的效果如下：
css文字竖排显示的方法三：
推荐使用这种方法，觉得这个方法兼容性也好，而且代码简洁
nbsp;html> h1 { width: 50px; font-size: 50px;letter-spacing: 20px; } 中秋月
登录后复制
css文字竖排显示效果如下：
css文字竖排显示的方法四：
使用br换行让其文字垂直竖排显示
利用html br换行标签实现文字换行，对每个文字后加上换行br标签让其竖列排版。
nbsp;html> body{text-align:center; line-height:60px;font-size:30px} /* CSS注释说明：设置css文字居中，css行高为22px间隔 */ p
h
p
中
文
网
登录后复制
css文字竖排显示的效果如下：
本篇文章到这里就介绍完了，其实还有很多的方法可以实现文字竖排显示，这里就不一一介绍了。更多精彩可以关注【创想鸟】。
以上就是css文字如何竖排显示？css文字竖排显示的方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2891841.html
