异常教程

css 文字竖排（建议收藏）

更新时间:

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

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

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

前言

在网页设计中，文字排版是提升用户体验的核心环节。随着设计需求的多样化，传统的横向文字布局已无法满足所有场景，例如需要在侧边栏展示竖排导航菜单、为艺术类页面设计竖排标题，或是为特定文化元素（如中文竖排书籍封面）提供视觉支持。本文将深入探讨 css 文字竖排 的实现方法，从基础属性到进阶技巧，结合代码示例与实际场景，帮助开发者轻松掌握这一技能。

基础知识：理解文字竖排的核心属性

writing-mode 属性

writing-mode 是 CSS 中控制文本方向的核心属性。它通过改变文本的布局方向，实现横向或竖向排列。对于 css 文字竖排，最常用的值包括：

  • vertical-rl：从右到左的竖排（传统中文竖排方式，文字从右向左依次排列）。
  • sideways-lr 和 sideways-rl：横向旋转文本，使其以水平方向排列但方向垂直于标准布局。

示例代码

.vertical-text {  
  writing-mode: vertical-rl; /* 从右到左竖排 */  
  /* 或使用 sideways 方式 */  
  /* writing-mode: sideways-lr; */  
}

比喻解释

想象将一张横向的纸张旋转90度，文字沿着纸张的“新高度”方向排列——这就是 vertical-rl 的效果。而 sideways 则像是将文字“躺倒”后横向排列，但方向垂直于常规布局。

实现方法与代码实践

方法一：直接使用 writing-mode

这是最直接的竖排实现方式，适用于现代浏览器。

场景案例：竖排导航菜单

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

.vertical-menu {  
  writing-mode: vertical-rl;  
  width: 100px; /* 设置容器宽度以适应竖排高度 */  
  padding: 20px;  
}

效果说明：导航项会垂直排列，适合侧边栏或空间有限的场景。

注意事项

  • 竖排后，容器的高度和宽度会互换，需手动调整尺寸。
  • 默认情况下，文字的垂直对齐可能需要通过 text-align 或 align-items 调整。

方法二：结合 Flexbox 或 Grid

当需要更复杂的布局时，可结合弹性布局实现竖排效果。

场景案例：卡片式竖排布局

<div class="card-container">  
  <div class="card">  
    <h3>标题</h3>  
    <p>内容...</p>  
  </div>  
  <!-- 其他卡片... -->  
</div>  

.card-container {  
  display: flex;  
  flex-direction: column;  
  align-items: flex-end; /* 右对齐竖排 */  
}  
.card {  
  writing-mode: vertical-rl;  
  margin: 10px;  
  padding: 15px;  
}

效果说明：卡片以竖排方式从右向左排列，适合需要分块布局的竖排场景。

方法三：兼容性处理与备用方案

旧版浏览器的兼容问题

某些旧版浏览器（如 IE 11）可能不支持 writing-mode，此时可通过以下方式实现：

  1. transform 旋转： 
    .fallback-vertical {  
  writing-mode: vertical-rl; /* 现代浏览器 */  
  -ms-writing-mode: tb-rl; /* IE 兼容 */  
  transform: rotate(180deg); /* 旋转文本方向 */  
}
  2. Flexbox 替代方案： 
    .flex-vertical {  
  display: flex;  
  flex-direction: column;  
  transform: rotate(180deg);  
}

进阶技巧与常见问题

问题1：文字方向反转

当使用 vertical-rl 时，文字可能从右到左排列，若需左到右，可尝试：

.text-reverse {  
  writing-mode: vertical-lr; /* 文字从左到右竖排 */  
  transform: rotate(180deg); /* 旋转容器 */  
}

问题2：竖排后的文本对齐

通过 text-align 或 justify-items 控制文字在容器中的位置：

.vertical-box {  
  display: grid;  
  justify-items: end; /* 右对齐 */  
  align-items: center;  
}

问题3：竖排与响应式设计

结合媒体查询，根据屏幕宽度切换布局模式：

@media (max-width: 768px) {  
  .responsive-text {  
    writing-mode: horizontal-tb; /* 横向布局 */  
  }  
}

实战案例：诗歌竖排排版

场景需求

为中文诗歌设计竖排排版，每列固定宽度，文字从右向左排列。

HTML 结构

<div class="poem-container">  
  <div class="poem-column">  
    <p>床前明月光，</p>  
    <p>疑是地上霜。</p>  
    <p>举头望明月，</p>  
    <p>低头思故乡。</p>  
  </div>  
</div>

CSS 样式

.poem-container {  
  width: 200px;  
  margin: 0 auto;  
}  

.poem-column {  
  writing-mode: vertical-rl;  
  text-align: center;  
  line-height: 1.8;  
  border: 1px solid #ddd;  
  padding: 15px;  
}

效果说明：诗歌以竖排形式居中显示，每列文字从右到左排列，符合传统中文竖排书籍的视觉习惯。

结论

通过本文的学习，开发者可以掌握 css 文字竖排 的多种实现方式，从基础属性到复杂布局，结合代码示例与场景分析，轻松应对各类设计需求。无论是导航菜单、艺术排版还是响应式布局，都能通过 writing-mode 和其他 CSS 技巧实现优雅的竖排效果。实践时，建议优先使用现代浏览器兼容的 writing-mode，并通过媒体查询和备用方案确保兼容性。掌握这一技能后，网页设计的创意边界将被进一步拓展，为用户提供更丰富的视觉体验。

最新发布

查看更多文章