当前位置：首页 > 前端开发 > 正文

如何把html字体竖向排列

admin
前端开发
2025-08-11
36

可通过 CSS 实现：给元素添加 writing-mode: vertical-rl;（文字竖排，从右往左）；或配合 transform: rotate(90deg) 旋转容器，再调整行高

核心技术原理

文字竖排的本质是改变文本流的默认方向（从「水平→」变为「垂直↓」）,现代浏览器通过以下两种方式实现该效果：

CSS逻辑属性重构：利用writing-mode属性直接修改文本书写模式；
物理变换模拟：通过transform: rotate()对文本进行90度旋转；
表格单元格适配：借助display: table-cell配合垂直对齐规则间接实现。

writing-mode是最符合语义化的现代方案,而其他方法属于历史遗留或兼容方案。

主流实现方法详解

方法1：`writing-mode`标准方案（推荐）

属性	取值	作用说明
`writing-mode`	`vertical-rl` / `vertical-lr`	定义垂直文本流方向
`text-orientation`	`mixed`/`upright`	控制字符朝向（防止倒置）
`letter-spacing`	数值	调整字符间距（解决重叠问题）
`line-height`	数值	控制行高（影响阅读舒适度）

代码示例：

<style>
.vertical-text {
  writing-mode: vertical-rl; / 从右向左排列 /
  text-orientation: upright; / 保持字符正立 /
  letter-spacing: 5px;       / 增加字间距 /
  line-height: 1.8;          / 优化行距 /
}
</style>
<div class="vertical-text">
  这是一段竖排文字示例，适用于古诗文排版。
</div>

特点分析：
️ 优势：原生支持，无需复杂计算；自动处理换行逻辑；符合W3C标准；
局限：IE浏览器不支持；部分旧版Chrome需添加-webkit-前缀；
️ 注意：必须设置text-orientation否则中文字符会镜像翻转。

方法2：`transform`旋转方案（应急用）

当需要快速实现简单竖排时,可采用以下技巧：

.rotate-text {
  display: inline-block;
  transform: rotate(90deg);
  transform-origin: left center; / 以左侧为轴心旋转 /
  white-space: nowrap;         / 禁止自动换行 /
}

适用场景：

如何把html字体竖向排列第1张

单行短文本的临时竖排；
配合绝对定位制作导航菜单；
移动端H5页面的特殊效果。

缺陷警示：
此方法仅改变视觉呈现，实际DOM结构仍为横向；
长文本会导致容器溢出；
无法正常进行文本选中操作。

方法3：表格单元格方案（精确控制）

通过将文本放入表格单元格，利用vertical-align实现精准定位：

<table style="width: 100%; border-collapse: collapse;">
  <tr>
    <td style="writing-mode: vertical-rl; text-align: center; height: 2em;">
      第一句诗词
    </td>
    <td style="writing-mode: vertical-rl; text-align: center; height: 2em;">
      第二句诗词
    </td>
  </tr>
</table>

优势对比：
| 指标 | writing-mode | transform | table-cell |
|——————–|————–|—————–|—————-|
| 语义化程度 | ⭐⭐⭐⭐⭐ | ⭐ | ⭐⭐ |
| 跨浏览器兼容性 | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| 布局灵活性 | ⭐⭐⭐⭐ | ⭐ | ⭐⭐⭐ |
| 性能开销 | 低 | 中 | 高 |
| 可维护性 | 高 | 低 | 中 |

进阶优化技巧

1. 解决字符重叠问题

当使用writing-mode时，密集文字可能出现重叠,可通过以下组合解决：

如何把html字体竖向排列第2张

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 3px;    / 基础字间距 /
  word-spacing: 8px;      / 词间额外间距 /
  font-feature-settings: "kern" on; / 开启字偶距调整 /
}

️ 2. 混合排版实践

对于图文混排场景,建议采用双层容器结构：

<div class="container">
  <div class="image-wrapper">
    <img src="example.jpg" alt="配图">
  </div>
  <div class="vertical-poem">
    <p>床前明月光</p>
    <p>疑是地上霜</p>
    <p>举头望明月</p>
    <p>低头思故乡</p>
  </div>
</div>

对应CSS：

.container { display: flex; gap: 20px; }
.vertical-poem p {
  writing-mode: vertical-rl;
  text-orientation: upright;
  margin: 0;
  font-size: 1.2em;
}

3. 响应式适配要点

针对不同屏幕尺寸需做专项优化：

@media (max-width: 768px) {
  .vertical-text {
    writing-mode: horizontal-tb; / 小屏恢复横排 /
    transform: none;             / 移除旋转效果 /
  }
}

典型应用场景

场景类型	推荐方案	技术要点
古典诗词展示	writing-mode + 书法字体	配合`font-family: "STKaiti"`
侧边栏导航菜单	transform + li元素	设置`li{margin-bottom: 2em}`
电子印章设计	table-cell + 边框样式	添加`border: 1px solid #ccc`
多语言对照排版	grid布局 + 双向文本	使用`direction: rtl`

常见错误排查

Q1: 为什么设置了`writing-mode`却没有效果？

A: 可能原因及解决方案：

如何把html字体竖向排列第3张

浏览器版本过低：检查是否为IE浏览器（完全不支持），建议升级至Edge/Chrome；
缺少厂商前缀：尝试添加-webkit-writing-mode: vertical-rl;；
父容器限制：确保外层容器有足够的高度容纳竖排文本；
冲突样式覆盖：检查是否有!important或其他高优先级样式干扰。

Q2: 如何调整竖排文字的行间距？

A: 根据所用方案选择对应属性：

writing-mode方案：直接修改line-height（推荐值1.5-2倍字体大小）；
transform方案：通过margin-bottom控制行间距；
table-cell方案：使用padding-bottom或border-spacing。

完整示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">HTML竖排文字演示</title>
    <style>
        .demo-box {
            display: flex;
            justify-content: space-around;
            margin: 20px;
        }
        .method1 {
            writing-mode: vertical-rl;
            text-orientation: upright;
            letter-spacing: 5px;
            line-height: 1.8;
            border: 1px dashed #999;
            padding: 10px;
            width: 200px;
        }
        .method2 {
            display: inline-block;
            transform: rotate(90deg);
            transform-origin: left center;
            white-space: nowrap;
            background: #f5f5f5;
            padding: 5px;
        }
        .method3 table {
            border-collapse: collapse;
        }
        .method3 td {
            writing-mode: vertical-rl;
            text-align: center;
            height: 2em;
            width: 80px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <h2>三种竖排文字实现方式对比</h2>
    <div class="demo-box">
        <div class="method1">春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。</div>
        <div class="method2">危楼高百尺，手可摘星辰，不敢高声语，恐惊天上人。</div>
        <div class="method3">
            <table>
                <tr>
                    <td>白日依山尽</td>
                    <td>黄河入海流</td>
                </tr>
                <tr>
                    <td>欲穷千里目</td>
                    <td>更上一层楼</td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>