CSS实现⽂字竖排DIVCSS⽂字垂直竖列排版显⽰如何实现？实现⽂字竖排排版显⽰兼容各⼤浏览器，让⽂字垂直竖列排版布局。
有时我们需要⼀段⽂字进⾏从上到下竖列排版，我们知道样式中有⼀样式可以让其竖列排版，但所有浏览器不全兼容，逼不得已放弃。但DIVCSS5有2中⽅法对实现竖排显⽰，在接下来通过知识讲解与实例案例演⽰让⼤家中⽂让⽂字垂直竖排显⽰。
实际的⽂字垂直竖排显⽰截图
⼀、原始使⽤writing-mode属性-不推荐  -
语法：writing-mode:lr-tb或writing-mode:tb-rl
参数：
1、lr-tb：从左向右，从上往下
2、tb-rl：从上往下，从右向左
运⾏代码发现，IE显⽰正常，⽕狐、⾕歌浏览器却不⽀持，所以不建议使⽤writing-mode属性。
了解的
⼆、使⽤CSS模拟⽂字竖排  -
对⽂字对象设置只能排下⼀个⽂字的宽度距离，让⽂字⼀⾏排不下两个⽂字使其⽂字⾃动换⾏，就形成了竖⽴排版需求。
1、完整（包括代码）：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5. <title>竖列排版实例 在线演⽰ www.divcss5</title>
6. <style>
css设置文字垂直居中
7. body{:center}
8. .shuli{ :0 auto;:20px;line-height:24px;:1px solid #333}
9. </style>
10. </head>
11. <body>
12. <div class="shuli">我是竖列排版</div>
13. </body>
14. </html>
说明：对⽂字设置较⼩的宽度，以达到⼀排只能排下⼀个⽂字，这样⽂字就⾃动换⾏，实现垂直竖列排版。
2、效果截图
CSS+DIV模拟换⾏实现竖列排版截图利⽤设置较⼩宽度，让⼀排显⽰不完两个⽂字，使其⽂字⾃动换⾏。
三、使⽤br换⾏让其⽂字垂直竖排显⽰  -
利⽤换⾏标签实现⽂字换⾏，对每个⽂字后加上换⾏让其竖列排版。
1、完整代码：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5. <title>竖列排版实例 在线演⽰ www.divcss5</title>
6. <style>
7. body{text-align:center; line-height:22px}
8. /* 说明：设置，为22px间隔 */
9. </style>
10. </head>
11. <body>
12. 我<br>是<br>竖<br>列<br>排<br>版
13. </body>
14. </html>
2、垂直竖列排版实例效果截图
通过以上两个div css案例让⼤家学会使⽤css和⽅式让⽂字兼容各⼤浏览器的垂直竖列排版。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。