CSS writing-mode 属性（超详细）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在网页设计中，布局与文本方向的控制是提升用户体验的核心要素之一。随着现代网页设计需求的多样化，开发人员常常需要突破传统的水平文字排版限制。CSS writing-mode 属性正是为此而生，它允许开发者灵活调整文本的书写方向，无论是垂直排列、侧向显示，还是其他创意布局，都能通过这一属性实现。本文将从基础概念、语法解析、实际案例到进阶技巧，全面介绍这一属性的使用方法与应用场景，帮助开发者掌握这一强大的布局工具。

一、什么是 writing-mode 属性？

writing-mode 属性是 CSS 中用于定义文本内容书写方向的属性。它能够控制文字、表格和图像的排列方式，支持水平、垂直以及侧向等多种模式。这一属性最初是为了适应不同语言的排版需求而设计，例如日语、中文竖排等场景，但如今也被广泛应用于创意设计和响应式布局中。

1.1 核心作用

• 改变文本方向：将文字从默认的水平排列切换为垂直或侧向排列。
• 影响布局流：调整元素内部的块级和行内方向，例如在垂直模式下，块级元素会垂直堆叠。
• 支持多语言适配：满足不同文化背景下的排版需求。

1.2 形象比喻

可以将 writing-mode 想象为“文字列车轨道”：

• 默认的 horizontal-tb（水平从左到右）如同火车在铁轨上横向行驶；
• vertical-rl（垂直从右到左）则像火车垂直向上行驶，但车身方向朝右；
• sideways-lr（侧向从左到右）则像火车倾斜90度，既保持横向行驶方向，又占据垂直空间。

二、语法与可用值

writing-mode 属性的语法简单直观，其可用值如下表所示：

2.1 关键点解析

• 块级与行内方向：
  在 vertical-rl 模式下，块级元素（如 div）会水平向左排列，而行内元素（如 span）则垂直向上排列。这种方向变化会直接影响元素的 width 和 height 属性含义，例如在垂直模式下，width 控制的是元素的垂直高度。

• 侧向模式的特殊性：
  sideways-lr 和 sideways-rl 模式会将文本旋转90度，但文字本身不会物理旋转，而是通过调整布局流实现视觉效果。

2.2 基础代码示例

/* 默认水平模式 */  
.container {  
  writing-mode: horizontal-tb;  
}  

/* 垂直从右到左模式 */  
.vertical-container {  
  writing-mode: vertical-rl;  
  width: 200px; /* 控制垂直方向的高度 */  
  height: 100px; /* 控制水平方向的宽度 */  
}  

三、应用场景与案例

3.1 场景1：垂直导航栏设计

在侧边栏或顶部导航中，使用 vertical-rl 可以实现优雅的竖排菜单效果。

HTML 结构：

<nav class="vertical-menu">  
  <a href="#">首页</a>  
  <a href="#">产品</a>  
  <a href="#">关于我们</a>  
</nav>  

CSS 样式：

.vertical-menu {  
  writing-mode: vertical-rl;  
  width: 120px; /* 控制垂直高度 */  
  padding: 20px;  
}  

3.2 场景2：艺术性标题排版

结合 sideways-lr 可以设计倾斜的标题效果，适用于海报或品牌页。

代码示例：

h1 {  
  writing-mode: sideways-lr;  
  transform: rotate(-180deg); /* 调整文字方向 */  
  white-space: nowrap; /* 防止换行 */  
  padding: 20px;  
}  

3.3 场景3：响应式布局适配

在移动端，通过媒体查询动态切换 writing-mode，优化小屏幕显示效果。

/* 默认桌面端布局 */  
.content {  
  writing-mode: horizontal-tb;  
}  

/* 移动端适配 */  
@media (max-width: 768px) {  
  .content {  
    writing-mode: vertical-rl;  
  }  
}  

四、进阶技巧与注意事项

4.1 兼容性问题

尽管主流浏览器（Chrome、Firefox、Edge）已全面支持 writing-mode 属性，但在旧版浏览器（如 IE11）中可能需要添加前缀或备用方案。

兼容性代码示例：

.vertical-text {  
  /* 标准语法 */  
  writing-mode: vertical-rl;  
  /* 兼容旧版浏览器 */  
  -webkit-writing-mode: vertical-rl;  
  -ms-writing-mode: tb-rl; /* IE 特定语法 */  
}  

4.2 布局流的影响

在垂直模式下，元素的 width 和 height 将与常规模式相反：

• width 控制元素的垂直高度；
• height 控制元素的水平宽度。

因此，在设置尺寸时需格外注意，避免布局错乱。

4.3 可访问性优化

使用 writing-mode 时，需确保文本方向与用户阅读习惯一致。例如，中文用户可能更习惯 vertical-rl，而日语用户可能偏好 vertical-lr。

五、常见问题与解决方案

5.1 问题1：文本方向切换后，元素位置偏移

原因：writing-mode 改变了布局流，导致元素坐标系变化。
解决方法：通过 transform 或 position 属性重新定位元素。

5.2 问题2：侧向模式下文本重叠

原因：默认 white-space 设置可能导致换行问题。
解决方法：添加 white-space: nowrap 或调整 line-height。

结论

CSS writing-mode 属性是网页布局中一颗灵活的“万能钥匙”，它不仅满足多语言排版需求，还能为设计师提供无限创意空间。通过本文的讲解，开发者可以掌握其核心语法、应用场景及注意事项，从而在实际项目中高效运用这一属性。无论是构建垂直导航、设计艺术标题，还是优化响应式布局，writing-mode 都能成为实现独特视觉效果的有力工具。

未来，随着 CSS 布局模型的持续演进，writing-mode 将与其他属性（如 grid 和 flex）进一步融合，为开发者带来更多可能性。建议读者通过实践不断探索，将理论转化为实际项目中的惊艳效果！