在CSS中实现字体竖排（垂直排列）主要通过writing-mode属性设置，以下是详细方法：

基础实现（CSS）

.vertical-text {
  writing-mode: vertical-rl; /* 从右向左垂直排列（传统中文排版） */
  /* 或 */
  writing-mode: vertical-lr; /* 从左向右垂直排列 */
}

完整示例代码

<style>
  /* 传统中文竖排（从右向左） */
  .classic-vertical {
    writing-mode: vertical-rl;
    text-orientation: upright; /* 保持文字正向 */
    margin: 20px;
    line-height: 1.8;  /* 调整字间距 */
  }

  /* 现代竖排（从左向右） */
  .modern-vertical {
    writing-mode: vertical-lr;
    text-orientation: mixed; /* 允许英文字母旋转 */
  }
</style>

<div class="classic-vertical">
  春眠不觉晓，处处闻啼鸟。
  夜来风雨声，花落知多少。
</div>

关键属性说明：

1. writing-mode（核心属性）

   • vertical-rl：文字从上到下排列，列从右向左推进（传统中文书籍样式）
   • vertical-lr：文字从上到下排列，列从左向右推进

2. text-orientation（文字方向控制）

   • upright：所有文字直立显示（推荐中文使用）
   • mixed：中文直立，英文旋转90°（默认值）
   • sideways：所有文字旋转90°

浏览器兼容性

• 所有现代浏览器（Chrome/Firefox/Edge/Safari）均支持
• 如需兼容旧版IE，需使用-ms-writing-mode前缀

注意事项：

1. 竖排时标点符号会自动适应垂直排版
2. 中文推荐组合使用：

   .chinese-vertical {
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 4px; /* 可增加纵向字间距 */
   }

3. 容器高度需足够，否则文字会被截断

其他场景：

表格单元格竖排：

td.vertical {
  writing-mode: vertical-rl;
  height: 150px; /* 需要指定高度 */
}

Flexbox/Grid布局适配：

.vertical-container {
  display: flex;
}
.vertical-item {
  writing-mode: vertical-rl;
  margin: 0 10px; /* 列间距 */
}

提示：对于复杂排版需求（如古籍印刷），可结合text-combine-upright属性实现数字/英文组合直立显示。