本篇文章给大家带来的内容是关于利用CSS如何实现文字的竖排，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
css可以使用writing-mode属性让文字竖排。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS writing-mode</title>
<style>
.test{width:100px;height:100px;margin:10px;border:1px solid #aaa;}
.lr-tb{-webkit-writing-mode:horizontal-tb;writing-mode:lr-tb;writing-mode:horizontal-tb;}
.tb-rl{-webkit-writing-mode:vertical-rl;writing-mode:tb-rl;writing-mode:vertical-rl;}
.tb-lr{-webkit-writing-mode:vertical-lr;writing-mode:tb-rl;writing-mode:vertical-lr;}
</style>
</head>
<body>
<div class="test lr-tb">本段文字将按照水平从左到右的书写方向进行流动。</div>
<div class="test tb-rl">本段文字将按照垂直从右到左的书写方向进行流动。</div>
<div class="test tb-lr">本段文字将按照垂直从左到右的书写方向进行流动。</div>
<ul>
<li>本段文字将按照垂直从右到左的书写方向进行流动。</li>
<li>本段文字将按照垂直从右到左的书写方向进行流动。</li>
</ul>
<ul>
<li>本段文字将按照垂直从左到右的书写方向进行流动。</li>
<li>本段文字将按照垂直从左到右的书写方向进行流动。</li>
</ul>
</body>
</html>
writing-mode 属性定义了文本在水平或垂直方向上如何排布。
writing-mode：horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl
writing-mode属性值：
horizontal-tb：
水平方向自上而下的书写方式。即 left-right-top-bottom（类似IE私有值lr-tb）
vertical-rl：
垂直方向自右而左的书写方式。即 top-bottom-right-left（类似IE私有值tb-rl）
vertical-lr：
垂直方向自左而右的书写方式。即 top-bottom-left-right
lr-tb：
左-右，上-下。对象中的内容在水平方向上从左向右流入，后一行在前一行的下面。 所有的字形都是竖直向上的。这种布局是罗马语系使用的（IE）
tb-rl：
上-下，右-左。对象中的内容在垂直方向上从上向下流入，自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的，半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的（IE）
writing-mode说明
设置或检索对象的内容块固有的书写方向。西方语言一般都是 lr-tb 的书写方式，但是亚洲语言 lr-tb | tb-rl 的书写方式都有。
