如何实现HTML元素像普通文本一样自动流式换行排列

解决方案 #

你要实现跨元素的文本流式换行，核心是让多个元素的文本进入同一个行内排版上下文，不要作为独立盒整体换行，修改代码如下：

修改后的CSS代码 #

.root {
  /* 移除原有flex相关属性 */
  background: pink;
}

.prefix {
  display: inline;
  white-space: pre-wrap;
  /* 匹配原需求的底部对齐效果 */
  vertical-align: bottom;
}

.text {
  display: inline;
  white-space: pre-wrap;
  vertical-align: bottom;
}

.colored {
  background: red;
  /* 可选：让换行后的背景每一行都完整显示 */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.big { width: 500px; }
.small { width: 320px; }
.smaller { width: 150px; }

原代码问题说明 #

原有代码使用了flex布局，父容器下的所有子元素都会被当作独立的弹性项处理，排版时会计算整个元素的宽度作为整体换行，因此才会出现第一行还有剩余空间时，第二个元素整体换行的问题。
将子元素设置为display: inline后，所有元素的文本会进入同一个行内排版流，和普通文本的换行规则完全一致，同时保留的white-space: pre-wrap属性也能满足你保留空格的需求。

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