css如何让文字竖排？

本篇文章给大家带来的内容是关于利用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：