嘿，当然有更灵活的解决方案啦！你当前用固定宽度搭配word-break: break-all的方式确实不够自适应，下面给你几个不需要固定宽度就能实现字符竖排且居中的CSS方案：

方案一：利用width: min-content（推荐，无需修改HTML） #

这个方案只需要替换你原来的固定宽度设置，就能让容器宽度自适应单个字符的宽度，自动实现每个字符单独占一行并居中。

修改后的CSS代码 #

.flex-container { display: flex; border: 1px solid #000000; }
.flex-container > div { width: 400px; height: 300px; text-align: center; line-height: 75px; font-size: 30px; }
.flex-container > div:nth-child(odd) { background-color : #62d962; }
.flex-container > div:last-child { display: flex; justify-content: flex-end; }
.flex-container > div:last-child div { 
  /* 移除固定宽度设置 */
}
.flex-container div:last-child div:nth-child(odd){ 
  background-color: #65e9e3; 
  word-break: break-all; 
  line-height: 1em; 
  padding: 1em 0; 
  width: min-content; /* 核心：让容器宽度收缩到单个字符的最小宽度 */
  text-align: center; /* 字符居中 */
  margin: 0 auto; /* 可选：让竖排容器在父元素中水平居中 */
}

关键属性解释 #

• width: min-content：让元素宽度自动收缩到内容的最小单元宽度（这里就是单个字符的宽度），触发文字自动换行。
• word-break: break-all：强制在任意字符处换行，确保长单词也能拆分为单个字符逐行显示。
• text-align: center：让每行的字符水平居中对齐。

方案二：Flex竖排布局（需调整HTML结构） #

如果愿意微调HTML结构，可以用Flex的竖排方向直接实现字符垂直排列并居中，不需要依赖换行规则：

修改后的HTML代码 #

<div class="flex-container">
  <div></div>
  <div></div>
  <div>
    <div class="vertical-text">
      <span>B</span>
      <span>o</span>
      <span>x</span>
    </div>
    <div></div>
    <div class="vertical-text">
      <span>B</span>
      <span>o</span>
      <span>x</span>
    </div>
    <div></div>
    <div class="vertical-text">
      <span>B</span>
      <span>o</span>
      <span>x</span>
    </div>
  </div>
</div>

对应的CSS代码 #

.vertical-text {
  display: flex;
  flex-direction: column; /* 竖排方向 */
  align-items: center; /* 字符水平居中 */
  background-color: #65e9e3;
  padding: 1em 0;
  line-height: 1em;
}

这种方式的优势是逻辑更直观，不需要依赖换行规则，但需要把每个字符用<span>单独包裹。

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