怎样让css字体竖着

admin 2026年03月12日 05:33 103 0

实现CSS字体竖排主要通过writing-mode属性，核心方法为设置writing-mode: vertical-lr（从左到右竖排）或writing-mode: vertical-rl（从右到左竖排），若需文字保持正向不倒置，可搭配text-orientation: upright，将段落文本竖排可写：p { writing-mode: vertical-rl; text-orientation: upright; }，需注意，此属性在主流现代浏览器（Chrome、Firefox、Edge等）中兼容性良好，但IE浏览器需使用-ms-writing-mode前缀，竖排时建议调整行高（line-height）和字间距（letter-spacing）以优化排版效果，确保阅读体验。

CSS实现文字竖排的几种方法：从基础到进阶

在网页设计中,文字竖排是一种独特的排版方式，常用于古风页面、海报标题、特殊UI组件等场景，能带来强烈的视觉层次感和文化氛围，本文将详细介绍CSS中实现文字竖排的几种方法，从基础属性到进阶技巧，帮助你快速掌握文字竖排的核心技巧。

核心方法：使用`writing-mode`属性

writing-mode是CSS专门控制文本写入模式的属性，是实现文字竖排最直接、最推荐的方法，它定义了文本的排列方向（水平或垂直）以及文本行内的流动方向。

基础语法与取值

writing-mode的常用取值有：

vertical-lr：从上到下垂直排列，行内文本从左到右流动（即"从上到下，从左到右"）。
vertical-rl：从上到下垂直排列，行内文本从右到左流动（即"从上到下，从右到左"）。
tb-rl：旧版语法（部分浏览器兼容），与vertical-rl效果类似，推荐使用新版vertical-rl。
horizontal-tb：默认值，水平从左到右排列。

示例代码

/* 使用 vertical-rl 实现从上到下、从右到左竖排 */
.vertical-text {
  writing-mode: vertical-rl;
  font-size: 20px;
  line-height: 1.5; /* 竖排时，line-height 控制字符之间的垂直间距 */
}
/* 使用 vertical-lr 实现从上到下、从左到右竖排 */
.vertical-text-lr {
  writing-mode: vertical-lr;
  font-size: 20px;
  line-height: 1.5;
}
/* 添加间距优化，增强竖排美感 */
.vertical-text {
  letter-spacing: 4px; /* 增加字符间距，使竖排更加清晰 */
  word-spacing: 8px;   /* 增加词间距，适用于多字词语 */
}

效果说明

vertical-rl：中文场景下更常用，比如古诗、书法作品排版，符合传统阅读习惯（从右到左的行方向）。
vertical-lr：适合需要"从左到右"行方向的场景，比如部分现代设计或特殊UI布局。
浏览器兼容性：现代浏览器（Chrome、Firefox、Edge、Safari）均支持writing-mode属性，但在移动端可能需要额外测试。

进阶优化：`text-orientation`属性控制字符方向

在使用writing-mode竖排时，如果包含英文、数字或符号，默认情况下字符会"躺平"（即旋转90度），影响阅读体验，此时需要配合text-orientation属性，控制字符的朝向。

基础语法与取值

text-orientation的常用取值：

mixed（默认值）：保持字符的自然方向（英文横排，中文竖排）。
upright：强制所有字符保持直立（无论中文还是英文，都不旋转）。
sideways：所有字符沿书写方向旋转（较少使用）。

示例代码

/* 竖排时让英文保持直立 */
.mixed-text {
  writing-mode: vertical-rl;
  text-orientation: upright; /* 关键：让英文/数字直立显示 */
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 2px; /* 增加字符间距，提升可读性 */
}
/* 对比：不使用 text-orientation（英文会旋转） */
.rotated-text {
  writing-mode: vertical-rl;
  /* 默认 text-orientation: mixed，英文会旋转90度 */
  font-size: 18px;
  line-height: 1.8;
}
/* 处理特殊符号和标点 */
.punctuation-handling {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 16px;
  /* 针对标点符号的特殊处理 */
  &::after {
    content: "";
    display: block;
    height: 0.5em;
  }
}

效果说明

text-orientation: upright：适合中英文混合的竖排场景，如"标题+英文副标题"，确保英文可读。
默认mixed：纯中文场景无需处理，但包含英文时会出现字符旋转，需根据需求选择。
实际应用：在诗词排版中，通常使用upright使英文和数字保持直立，提升整体美观度。

替代方案：使用`transform: rotate()`旋转元素

如果场景简单（如少量文字、不需要复杂文本流），也可以通过transform: rotate()旋转元素实现竖排，但这种方法存在局限性（如布局可能被破坏）。

基础语法

/* 旋转90度（顺时针）实现竖排 */
.rotate-text {
  transform: rotate(90deg);
  transform-origin: left top; /* 设置旋转原点，避免元素偏移 */
  font-size: 20px;
  line-height: 1.5;
  display: inline-block; /* 需要设置块级/行内块级元素，避免影响布局 */
  white-space: nowrap; /* 防止文字换行 */
}
/* 逆时针旋转实现另一种竖排效果 */
.rotate-text-reverse {
  transform: rotate(-90deg);
  transform-origin: right top;
  display: inline-block;
  white-space: nowrap;
}

局限性

布局影响：旋转后元素会脱离文档流，可能需要手动调整位置（如margin或position）。
文本方向：旋转后，英文仍会保持横排（与writing-mode不同），且无法通过text-orientation控制。
适用场景：仅适合少量文字、不需要考虑文本流的场景（如按钮图标旁的短文字）。
响应式问题：在响应式设计中，旋转元素可能导致布局错乱，需要额外处理。

何时选择`transform`方法

需要兼容非常旧的浏览器（不支持writing-mode）。
仅需简单旋转少量文字,不需要复杂的文本流控制。
需要与动画效果结合,利用transform的动画性能优势。

综合案例：中英文混合竖排排版

结合writing-mode和text-orientation，实现一个完整的中英文混合竖排效果：

HTML结构

<div class="vertical-container">
  <h2 class="title">诗词排版</h2>
  <p class="content">
    床前明月光，疑是地上霜。
    举头望明月，低头思故乡。
    <span class="english">A Moonlit Night</span>
  </p>
</div>

CSS样式

.vertical-container {
  width: 200px;
  padding: 20px;
  border: 1px solid #eee;
  font-family: "Microsoft YaHei", sans-serif;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
{
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
  letter-spacing: 6px;
}
.content {
  writing-mode: vertical-rl;
  text-orientation: mixed;

标签： #mode flexdirection