css 文字竖直排列

要使文字竖直排列，主要就是通过 writing-mode 控制。

p:{

writing-mode : tb  

}

或是：

p:{

writing-mode : tb -rl

}

这两种写法将会使文字从右到左上下排列。

 

另外还有两种：

p:{

writing-mode : vertical-lr

}

使文字从左往右竖直排列。

p:{

writing-mode : vertical-rl

}

使文字从右往左竖直排列。

比如现在要实现这一效果：

竖直排列的诗文，需要以下代码实现：

html:

<div class="vertical">
            <p>
                独立寒秋，湘江北去，橘子洲头，看万山红遍，层林尽染，漫江碧透，百舸争流。鹰击长空，鱼翔浅底，万类霜天竞自由。
                怅寥廓，问苍茫大地，谁主沉浮？
                携来百侣曾游，忆往昔峥嵘岁月稠。恰同学少年，风华正茂，书生意气，挥斥方遒，指点江山，粪土当年万户侯。曾记否？到中流击水，浪遏飞舟！
            </p>
        </div>

css代码：

.vertical{
            padding: 8px;
            width: 380px;
            height: 250px;
            background-image: url(image/lushan.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            overflow: hidden;
            
        }
        .vertical p{
            writing-mode: tb-rl;
            text-align: left;
            line-height: 30px;
            color: #FFFFFF;
        }