CSS writing-mode 属性详解：实现文字横竖排版的完整指南
什么是 writing-mode 属性？
CSS 的 writing-mode 属性用于定义文本的书写方向，控制内容在页面上的流动方式。该属性不仅影响文本方向，还决定了块级元素的堆叠方向和内容流动顺序。通过合理使用这一属性，可以实现中文传统竖排文字效果或特殊排版需求。
属性语法与取值
writing-mode 属性的基本语法如下：
selector {
writing-mode: horizontal-tb | vertical-rl | vertical-lr;
}
属性值详解
-
horizontal-tb（默认值）
文本水平排列，阅读顺序为从左到右、从上到下。这是现代网页的标准排版方式。 -
vertical-rl
文本垂直排列，阅读顺序为从上到下、从右到左。这是中文传统书籍的排版方式。 -
vertical-lr
文本垂直排列，阅读顺序为从上到下、从左到右。这种排版方式在某些亚洲语言中使用。
基础应用示例
示例1：三种书写模式对比
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 20px;
padding: 20px;
font-family: "Microsoft YaHei", sans-serif;
}
.text-box {
border: 2px solid #4CAF50;
padding: 15px;
width: 250px;
height: 300px;
font-size: 16px;
line-height: 1.6;
background-color: #f9f9f9;
}
.horizontal {
writing-mode: horizontal-tb;
}
.vertical-lr {
writing-mode: vertical-lr;
}
.vertical-rl {
writing-mode: vertical-rl;
}
h3 {
color: #333;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div>
<h3>水平排版 (horizontal-tb)</h3>
<div class="text-box horizontal">
<p>欢迎来到代码号学习平台。在这里，您可以系统学习前端开发技术，包括HTML、CSS和JavaScript等。我们的教程由浅入深，适合各个层次的学习者。</p>
</div>
</div>
<div>
<h3>垂直排版-从左到右 (vertical-lr)</h3>
<div class="text-box vertical-lr">
<p>欢迎来到代码号学习平台。在这里，您可以系统学习前端开发技术，包括HTML、CSS和JavaScript等。</p>
</div>
</div>
<div>
<h3>垂直排版-从右到左 (vertical-rl)</h3>
<div class="text-box vertical-rl">
<p>欢迎来到代码号学习平台。在这里，您可以系统学习前端开发技术，包括HTML、CSS和JavaScript等。</p>
</div>
</div>
</div>
</body>
</html>
示例2：结合 letter-spacing 属性
<!DOCTYPE html>
<html>
<head>
<style>
.poem-container {
margin: 30px auto;
max-width: 1200px;
}
.poem {
border: 1px solid #ddd;
margin: 20px;
padding: 20px;
display: inline-block;
background-color: #fffaf0;
}
.classical {
writing-mode: vertical-rl;
height: 400px;
letter-spacing: 8px;
font-size: 20px;
font-family: "SimSun", serif;
line-height: 2;
}
.modern {
writing-mode: horizontal-tb;
width: 400px;
letter-spacing: 2px;
font-size: 18px;
font-family: "Microsoft YaHei", sans-serif;
line-height: 1.8;
}
h2 {
color: #8B4513;
border-bottom: 2px solid #8B4513;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div class="poem-container">
<h2>古诗竖排效果</h2>
<div class="poem classical">
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
<p>——李白《静夜思》</p>
</div>
<h2>现代诗横排效果</h2>
<div class="poem modern">
<p>在这静谧的夜晚，</p>
<p>月光洒满窗前，</p>
<p>思绪随风飘远，</p>
<p>回到那熟悉的故乡。</p>
</div>
</div>
</body>
</html>
实际应用场景
场景1：中文传统文献展示
<!DOCTYPE html>
<html>
<head>
<style>
.classical-literature {
writing-mode: vertical-rl;
height: 500px;
font-family: "KaiTi", "楷体", serif;
font-size: 24px;
line-height: 2.5;
padding: 30px;
border-right: 3px double #8B4513;
background: url('https://www.ebingou.cn/biancheng/images/2.jpg') no-repeat center;
background-size: cover;
color: #333;
margin: 0 auto;
max-width: 600px;
}
.literature-container {
background-color: #f5f5dc;
padding: 40px;
text-align: center;
}
h2 {
color: #8B4513;
font-family: "SimSun", serif;
}
</style>
</head>
<body>
<div class="literature-container">
<h2>论语·学而篇</h2>
<div class="classical-literature">
<p>子曰：学而时习之，不亦说乎？</p>
<p>有朋自远方来，不亦乐乎？</p>
<p>人不知而不愠，不亦君子乎？</p>
<p>曾子曰：吾日三省吾身——</p>
<p>为人谋而不忠乎？</p>
<p>与朋友交而不信乎？</p>
<p>传不习乎？</p>
</div>
</div>
</body>
</html>
场景2：创意名片设计
<!DOCTYPE html>
<html>
<head>
<style>
.business-card-container {
display: flex;
justify-content: center;
gap: 40px;
padding: 50px;
flex-wrap: wrap;
}
.business-card {
width: 300px;
height: 200px;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
display: flex;
align-items: center;
justify-content: center;
}
.vertical-card {
writing-mode: vertical-rl;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.horizontal-card {
writing-mode: horizontal-tb;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
}
.card-content {
text-align: center;
}
.name {
font-weight: bold;
margin-bottom: 10px;
}
.title {
opacity: 0.9;
}
.contact {
margin-top: 15px;
font-size: 0.9em;
}
</style>
</head>
<body>
<div class="business-card-container">
<div class="business-card vertical-card">
<div class="card-content">
<div class="name">张小明</div>
<div class="title">前端开发工程师</div>
<div class="contact">电话：13800138000</div>
<div class="contact">邮箱：zhang@example.com</div>
</div>
</div>
<div class="business-card horizontal-card">
<div class="card-content">
<div class="name">李小红</div>
<div class="title">UI/UX设计师</div>
<div class="contact">电话：13900139000</div>
<div class="contact">邮箱：li@example.com</div>
</div>
</div>
</div>
</body>
</html>
响应式设计中的应用
<!DOCTYPE html>
<html>
<head>
<style>
.responsive-container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
.content-block {
margin: 20px 0;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
}
/* 移动端竖排显示 */
@media (max-width: 768px) {
.responsive-vertical {
writing-mode: vertical-rl;
height: 400px;
padding: 15px;
font-size: 18px;
}
}
/* 桌面端横排显示 */
@media (min-width: 769px) {
.responsive-vertical {
writing-mode: horizontal-tb;
padding: 20px;
font-size: 16px;
}
}
.code-example {
background-color: #f4f4f4;
padding: 15px;
border-left: 4px solid #4CAF50;
margin: 15px 0;
font-family: monospace;
}
</style>
</head>
<body>
<div class="responsive-container">
<div class="content-block responsive-vertical">
<h3>响应式排版示例</h3>
<p>在移动设备上，这段文字将以竖排方式显示，模拟传统中文阅读体验；在桌面设备上，将以标准的横排方式显示。</p>
<p>这种响应式设计让用户在不同设备上都能获得的阅读体验。</p>
</div>
<div class="code-example">
/* CSS代码示例 */<br>
@media (max-width: 768px) {<br>
.responsive-vertical {<br>
writing-mode: vertical-rl;<br>
}<br>
}<br>
@media (min-width: 769px) {<br>
.responsive-vertical {<br>
writing-mode: horizontal-tb;<br>
}<br>
}
</div>
</div>
</body>
</html>
本节课程知识要点
-
writing-mode 基础概念：该属性控制文本的书写方向和内容流动方式
-
三种主要模式：
-
horizontal-tb：水平方向，从上到下 -
vertical-rl：垂直方向，从右到左 -
vertical-lr：垂直方向，从左到右
-
-
实际应用价值：
-
中文传统文献的竖排展示
-
创意设计和特殊排版需求
-
响应式网页设计中的自适应布局
-
-
兼容性考虑：现代浏览器均支持 writing-mode 属性，但在实际项目中仍需测试不同浏览器的表现
-
结合其他属性：可以与
letter-spacing、line-height等属性配合使用，获得更好的排版效果
