如何让文字竖排

最新推荐文章于 2022-04-15 16:35:28 发布

DrunkYoung

最新推荐文章于 2022-04-15 16:35:28 发布

阅读量408

点赞数

本文链接：https://blog.csdn.net/DrunkYoung/article/details/104367320

版权

文字竖排可以用writing-mode属性

兼容谷歌、火狐等浏览器（IE不兼容）:
writing-mode:vertical-rl; //垂直方向，从右到左
writing-mode:vertical-lr; //垂直方向，从左到右
IE私有属性（其他浏览器不兼容）：
writing-mode:lr-tb; //默认，从左到右，从上到下。
writing-mode:tb-rl; //从上到下，从右到左。
writing-mode:tb-lr; //水平方向，从上到下，从左到右。

<style>
div{writing-mode:vertical-lr;
font-size:14px;
 width:500px;
 height:350px;
 background:url(er.jpg)no-repeat;
 text-decoration:underline;
 line-height:25px;
 font-family:STKaiti;
 color:#fa8072;}
h3{text-indent:50px;}
</style>
<body>
<div>
<h3>寄人间</h3>
去岁海棠红 零落栖枝头 </br>
曾有故人折枝相送</br>
今宵醉梦中 梦尽闲人来 </br>
何以故人不肯入梦</br>
倏忽百年 临安城空 不见影踪</br>
死生之巅 长阶三千 谁人与共</br>
随旧事迢递过千峰 爱恨皆尘封</br>
当时少年挥剑斩尽春风</br>
我寄人间白雪满头 夜雨守孤冢</br>
君埋泉下骨销泥中
</div>
</body>

在这里插入图片描述