如何在HTML中实现两段文本的两列交替并列自动换行？

需求说明 #

需要将两段文本A和B实现列向并列（竖排方向），支持自动文本换行，最终呈现「文本A、文本B、文本A续篇、文本B续篇……」的交替排列效果。目前代码仅能让文本B显示在文本A之后，现有代码如下：

现有CSS代码

.vert{
  writing-mode: vertical-lr;
}

.mnc{
  -ms-writing-mode: tb-lr;
  -webkit-writing-mode: vertical-lr;
  -moz-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
}

现有HTML代码

<div class="vert">
  <div class="vert mnc">ᠰᡠᠸᡝᠮᠪᡝ ᡨᠠᠴᡳᡵᡝ ᡩᡝ ᠠᠮᡠᡵᠠᠨ ᠠᡴᡡ ᠰᡝᠴᡳ᠈ ᠰᡠᠸᡝ ᡤᡝᠯᡳ ᡳᠨᡝᠩᡤᡳᡩᠠᡵᡳ ᡨᠠᠴᡳᠮᡝ ᠪᡳ᠉</div>
  <div class="vert">Suwembe tacire de amuran akv seci, suwe geli inenggidari tacime bi.</div>
</div>

解决方案 #

可以实现预期效果，只需调整CSS布局，利用多列布局配合竖排模式即可达成。具体修改如下：

修改后的CSS代码

.vert-container {
  writing-mode: vertical-lr;
  columns: 2; /* 设置列数为2，实现A、B交替列排 */
  column-gap: 20px; /* 列间距，可按需调整 */
  max-height: 400px; /* 可选：设置容器最大高度，触发自动换列 */
}

.vert-item {
  break-inside: avoid; /* 避免单个文本块被拆分到不同列 */
  margin: 0; /* 消除默认间距，保证列对齐 */
}

/* 保留原有蒙文兼容样式 */
.mnc{
  -ms-writing-mode: tb-lr;
  -webkit-writing-mode: vertical-lr;
  -moz-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
}

修改后的HTML代码

<div class="vert-container">
  <div class="vert-item mnc">ᠰᡠᠸᡝᠮᠪᡝ ᡨᠠᠴᡳᡵᡝ ᡩᡝ ᠠᠮᡠᡵᠠᠨ ᠠᡴᡡ ᠰᡝᠴᡳ᠈ ᠰᡠᠸᡝ ᡤᡝᠯᡳ ᡳᠨᡝᠩᡤᡳᡩᠠᡵᡳ ᡨᠠᠴᡳᠮᡝ ᠪᡳ᠉ ᠰᡠᠸᡝᠮᠪᡝ ᡨᠠᠴᡳᡵᡝ ᡩᡝ ᠠᠮᡠᡵᠠᠨ ᠠᡴᡡ ᠰᡝᠴᡳ᠈ ᠰᡠᠸᡝ ᡤᡝᠯᡳ ᡳᠨᡝᠩᡤᡳᡩᠠᡵᡳ ᡨᠠᠴᡳᠮᡝ ᠪᡳ᠉ ᠰᡠᠸᡝᠮᠪᡝ ᡨᠠᠴᡳᡵᡝ ᡩᡝ ᠠᠮᡠᡵᠠᠨ ᠠᡴᡡ ᠰᡝᠴᡳ᠈ ᠰᡠᠸᡝ ᡤᡝᠯᡳ ᡳᠨᡝᠩᡤᡳᡩᠠᡵᡳ ᡨᠠᠴᡳᠮᡝ ᠪᡳ᠉</div>
  <div class="vert-item">Suwembe tacire de amuran akv seci, suwe geli inenggidari tacime bi. Suwembe tacire de amuran akv seci, suwe geli inenggidari tacime bi. Suwembe tacire de amuran akv seci, suwe geli inenggidari tacime bi.</div>
</div>

效果说明

• 容器设置columns: 2后，结合writing-mode: vertical-lr实现竖排的列向并列布局。
• break-inside: avoid确保单个文本块不会被拆分到不同列，文本A完整占据第一列后，文本B占据第二列；当文本A长度超过单列高度时，剩余内容自动填充到第三列，文本B的剩余内容填充到第四列，完美实现「A、B、A续、B续」的交替排列。
• 可通过column-gap调整列间距，max-height控制容器高度，按需触发自动换列。

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