css文字竖排显示的方法一：
使用writing-mode属性
语法：writing-mode:lr-tb或writing-mode:tb-rl
参数：lr-tb：从左向右，从上往下；tb-rl：从上往下，从右向左。
<!DOCTYPE html> <html> <head> <title>test</title> <meta charset="UTF-8"> </head> <style> .one { margin: 0 auto; height: 140px; writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/ writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/ } </style> <body> <div class="one">十轮霜影转庭梧，此夕羁人独向隅。未必素娥无怅恨，玉蟾清冷桂花孤。 </div> </body> </html>css文字竖排显示效果如下：
这种方法兼容性不好，只有在IE浏览器中才能支持，所以并不推荐使用，这里就不过多介绍要想了解更多可以参考css在线手册。
css文字竖排显示的方法二：
对文字对象宽度设置只能排下一个文字的宽度距离，让文字一行排不下两个文字使其文字自动换行，就形成了竖立排版需求。
<!DOCTYPE html> <html> <head> <title>test</title> <meta charset="UTF-8"> </head> <style> .one { width: 52px; margin: 0 auto; line-height: 56px; font-size: 50px;} </style> <body> <div class="one">中秋月</div> </body> </html>注意：word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/
说明：对文字DIV设置较小的宽度，以达到一排只能排下一个文字，这样文字就自动换行，实现垂直竖列排版。
css文字竖排显示的效果如下：
css文字竖排显示的方法三：
推荐使用这种方法，觉得这个方法兼容性也好，而且代码简洁
<!DOCTYPE html> <html> <head> <style> h1 { width: 50px; font-size: 50px;letter-spacing: 20px; } </style> </head> <body> <h1>中秋月</h1></body> </html>css文字竖排显示效果如下：
css文字竖排显示的方法四：
使用br换行让其文字垂直竖排显示
利用html br换行标签实现文字换行，对每个文字后加上换行br标签让其竖列排版。
<!DOCTYPE html> <html> <head> <style> body{text-align:center; line-height:60px;font-size:30px} /* CSS注释说明：设置css文字居中，css行高为22px间隔 */ </style> </head> <body> p<br>h<br>p<br>中<br>文<br>网 </body> </html>css文字竖排显示的效果如下：
本篇文章到这里就介绍完了，其实还有很多的方法可以实现文字竖排显示，这里就不一一介绍了。更多精彩可以关注小兔网。
以上就是css文字如何竖排显示？css文字竖排显示的方法的知识。速戳>>知识兔学习精品课！