如何用CSS vertical-lr垂直展示数组，避免数字拆分问题？

你用vertical-lr属性配合text-orientation: upright垂直展示数组，但多位数元素（比如10）会被拆成单个字符分行显示，需要让每个数组元素单独占一行。

现有代码 #

CSS代码 #

.vericaltext {
  display: inline-block;
  margin-right: 6px;
  background-color: #EEE;
  writing-mode: vertical-lr;
  text-orientation: upright;
}

HTML代码 #

<h1 class='vericaltext'>{[1,2,3,4,5,6,7,8,9,10]}</h1>

解决办法 #

方法1：拆分数组元素为独立HTML元素 #

这是最稳妥的方案——把每个数组元素单独用<span>包裹，让浏览器将每个元素视为独立排版单元，不会拆分多位数：

修改后的HTML

<h1 class='vericaltext'>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
</h1>

调整后的CSS（可选微调）

.vericaltext {
  display: inline-block;
  margin-right: 6px;
  background-color: #EEE;
  writing-mode: vertical-lr;
}
.vericaltext span {
  display: block; /* 强制每个元素单独占一行 */
  text-orientation: upright; /* 保持文字直立，按需保留 */
}

方法2：给多位数加不换行样式 #

如果没法拆分HTML结构（比如数组是动态生成的），可以给多位数元素添加white-space: nowrap，强制浏览器不拆分该元素内的字符：

示例HTML（动态场景）

<h1 class='vericaltext'>
  1,2,3,4,5,6,7,8,9,<span class="no-break">10</span>
</h1>

对应CSS

.no-break {
  white-space: nowrap;
}

方法3：用Flex布局替代writing-mode #

如果不需要依赖writing-mode，改用Flex垂直布局更直观，直接控制每个元素分行：

CSS代码

.vericaltext {
  display: flex;
  flex-direction: column;
  margin-right: 6px;
  background-color: #EEE;
}

HTML代码（同样需要拆分元素）

<h1 class='vericaltext'>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
</h1>

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