CSS文本排列方向

最新推荐文章于 2025-09-30 22:30:02 发布

原创最新推荐文章于 2025-09-30 22:30:02 发布 · 7.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

CSS/CSS3 专栏收录该内容

14 篇文章

订阅专栏

writing-mode: horizontal-tb;  //默认
writing-mode: vertical-rl; //文字垂直排列 向左对齐
writing-mode: vertical-lr; //文字垂直排列 向右排列

一、属性定义及使用说明

writing-mode 属性定义了文本在水平或垂直方向上如何排布。

语法格式如下：

writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom
vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left
vertical-lr：垂直方向内内容从上到下，水平方向从左到右
sideways-rl：内容垂直方向从上到下排列
sideways-lr：内容垂直方向从下到上排列

二、举例

在这里插入图片描述
代码如下：

<html lang="zh-ch">
<head>
<meta charset="utf-8" />
<title>writing-mode</title>
<style>
  	ul {
		list-style:none;
		margin:0 auto;
	}
	ul li.test {
		margin-right:20px;
	}
	.test {
		width:100px;
		height:100px;
		border:1px solid #aaa;
		margin:0 auto 20px;
		font-size:14px;
		padding:10px;
	}
	.test span {
		color:red;
		font-weight:700;
	}
	.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">
    本段文字将按照<span>水平从左到右</span>的书写方向进行流动。
   </div>
  <div class="test tb-rl">

    本段文字将按照<span>垂直从右到左</span>的书写方向进行流动。
  </div>
  <div class="test tb-lr">

    本段文字将按照<span>垂直从左到右</span>的书写方向进行流动。
  </div>
  <ul class="tb-rl">
    <li class="test">本段文字将按照垂直从右到左的书写方向进行流动。</li>
    <li class="test">本段文字将按照垂直从右到左的书写方向进行流动。</li>
  </ul>
  <ul class="tb-lr">
    <li class="test">本段文字将按照垂直从左到右的书写方向进行流动。</li>
    <li class="test">本段文字将按照垂直从左到右的书写方向进行流动。</li>
  </ul>
</body>
</html>