本文详细介绍了如何使用CSS属性writing-mode实现文字的竖直排列，包括两种方式：一是从右到左阅读的vertical-rl，二是保持从左到右阅读顺序的vertical-lr。通过调整writing-mode属性，可以轻松改变文本的布局方向。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background: yellowgreen;
/*文字竖直书写*/
/*writing-mode: tb-rl;*/
writing-mode: vertical-rl;
font-weight: bold;
font-size: 20px;
/*字符之间的距离*/
letter-spacing: 10px;
/*单词之间的距离*/
word-spacing: 10px;
}
</style>
</head>
<body>
<p>这是一段竖直写的文字 hello world</p>
</body>
</html>
vertical-rl表示文本是垂直方向(vertical)展示，然后阅读的顺序是从右往左(rl:right-left)，跟我们古诗的阅读顺序一致。
vertical-lr表示文本是垂直方向(vertical)展示，然后阅读的顺序还是默认的从左往右(lr:left-right)，也就是仅仅是水平变垂直。
扫一扫
6731
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
