Html 使用css在楼梯中换行文本

我是css新手，我想知道，是否有可能用css实现自定义方式的文本包装。假设我的报告有6列。每列都有自己的对齐方式，报告的初始状态为：

|| col1 centered || col2 centered ||col3 left align   ||    col4 right||

调整浏览器大小、缩小浏览器后，第一列溢出，第二列发生换行：

||  col1 centered
||          col2 centered ||col3 left align    ||      col4 right||          

此外，再缩小一点，第三列中的文本与最右边一列中的文本重叠，并强制第四列按如下方式换行：

||  col1 centered
||          col2 centered ||col3 left align 
||                                      col4 right align ||

|| col1 centered
||     col2 centered
||          col3 left align
||               col4 right align 

最后，当浏览器无法进一步缩小时，将在楼梯中包裹包裹包裹的字符串，其中每个步骤都是某个初始列的文本，报告如下所示：

||  col1 centered
||          col2 centered ||col3 left align 
||                                      col4 right align ||

|| col1 centered
||     col2 centered
||          col3 left align
||               col4 right align 

---

我试着玩积木，内联积木，但无法实现楼梯的方式包裹。哪些css方法/对象最适合实现上述楼梯中的包裹？

这似乎可以回答您的问题。。相关：这回答了你的问题吗？在发布问题之前，我会看到建议的链接，在我的例子中，我会在同一行中查找一些类似于多个内联块的内容，每个内联块内部具有不同的文本对齐方式，在换行后，每个内联块向下一行，保留其相对于页面左侧的相对偏移量。默认情况下，使用JavaScript是一个解决问题的方法，但可能有纯css解决方案吗？