CSS实现单个p标签内容高度超125px时自动分栏的方法

可以实现，完全不需要改动指定的div嵌套单个p标签的HTML结构，无需拆分段落内容、无需引入JavaScript，仅靠原生CSS即可满足「p标签内内容高度超过125px时自动拆分到下一列展示」的需求。

使用CSS原生多列布局（Multi-column Layout）特性即可完成效果，核心逻辑是给外层容器设置固定单栏高度，浏览器会自动将超出高度阈值的内容排列到右侧新列中。
你提供的HTML代码不需要做任何修改，仅需添加如下CSS样式：

div {
  /* 设定单栏最大高度为要求的125px */
  height: 125px;
  /* 列与列之间的间距，可根据实际视觉需求调整数值 */
  column-gap: 24px;
  /* 列宽自适应，根据内容总量自动生成对应数量的列 */
  column-width: auto;
  /* 按从左到右的顺序填充列，单栏填满后再填充下一栏，不自动平衡各栏高度 */
  column-fill: auto;
}

p {
  /* 清除p标签默认的上下外边距，避免默认边距干扰高度计算 */
  margin: 0;
  /* 可选配置：英文单词在换行/换列位置自动添加连字符，避免排版突兀 */
  hyphens: auto;
}

• 文本默认从最左侧列开始从上向下排列
• 当第一列内容高度达到125px阈值后，剩余内容会自动流入右侧相邻的下一列继续排列
• 总列数会随段落内容长度动态增减，和预期的动态分栏效果完全匹配
• 该方案兼容所有现代浏览器，不需要额外做适配处理

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