如何实现中日蒙等竖排文字的多列自动换行排版？

你的需求完全可行，问题出在当前代码仅实现了竖排方向，但未启用自动分栏布局。要实现「满屏宽后自动换行到下方新列」的效果，只需结合CSS的多列布局属性与竖排模式即可。

问题分析 #

当前.chinese类仅通过writing-mode: vertical-rl实现了文字竖排、从右到左的流向，但文本只会在单一列内垂直延伸，不会自动拆分到左侧新列。要达到你给出的表格式排版，需要让容器支持自动分栏。

解决方案 #

修改CSS，为竖排容器添加多列布局属性，核心调整如下：

• 为.chinese添加columns属性（可指定列宽或列数），让浏览器自动根据容器宽度拆分文本为多列
• 移除不必要的dir: rtl（writing-mode已控制排版方向）
• 调整段落样式，取消固定高度限制，让内容自适应分栏

修改后的完整代码：

CSS代码

h1 {
  text-align: center;
  font-size: 16pt;
}

.chinese {
  font-family: 'Noto Serif TC', serif;
  writing-mode: vertical-rl;
  text-orientation: upright;
  /* 自动分栏：列宽最小为12em，浏览器根据屏幕宽度自动计算列数 */
  column-width: 12em;
  /* 可选：移除默认分栏间隙 */
  column-gap: 0;
  width: 100%;
}

.chinese p {
  font-size: 12pt;
  text-indent: 0;
  /* 避免单个段落被拆分到不同列 */
  break-inside: avoid;
}

HTML代码

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="stylesheet_CN.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+TC&display=swap" rel="stylesheet">
</head>
<body>
  <h1>Example text in Chinese characters (vertical)</h1>
  <section class="chinese">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies dapibus nulla cursus accumsan. Proin tempor neque id libero dignissim condimentum. Vivamus malesuada, dolor nec dapibus sagittis, metus magna ultricies sem, ac lobortis justo eros ac enim. Nulla bibendum tellus tellus, quis ultricies mi efficitur sed. Suspendisse malesuada sapien eu felis vehicula, quis bibendum sapien maximus. Sed sollicitudin lobortis rhoncus. Nulla sit amet nulla ante.</p>
  </section>
</body>
</html>

关键属性说明 #

• writing-mode: vertical-rl：定义文字竖排、从右向左的排版方向
• column-width: 12em：设置每列的最小宽度，浏览器会根据容器宽度自动计算显示列数，文本填满一列后自动流入左侧新列
• break-inside: avoid：防止单个段落被拆分到不同列中，保证排版完整性

调整后，文本会从屏幕右侧第一列开始，从上到下排列，当列高度填满后自动切换到左侧下一列，完全符合你想要的排版效果。

内容的提问来源于stack exchange，提问作者TheHendrik