Javascript 如何在css中水平包装垂直溢出？

我试图实现一些简单的东西，但想不出在css中实现的方法

我想开发一个页面，它应该是水平滚动的，文本应该保持水平溢出

也就是说，像这样的站点：

但水平网格基本上是不同的div。我想要的是，第一个div的部分应该自动溢出到它的右水平位置

就像我们在研究论文中所做的那样，通过创建两个横向分区，如下所示：

---

如何在CSS中做到这一点（如果需要，使用Javascript）？

您可以使用CSS3“columns”属性，如所示，因为据我所知，以下内容应该可以实现您想要实现的目标：

<style>
    .wrapper {
        position:absolute;
        overflow-x:auto;
        overflow-y:hidden;
        top:0;
        left:0;
        bottom:0;
        right:0;
        background-color:green;
    }
    .inner-wrapper {
        width:20000px;
    }
    .column {
        height:200px;
        border:1px solid #000;
        background-color:blue;
        color:#fff;
        padding:20px;
        float:left;
    }
</style>

<div class="wrapper">
    <div class="inner-wrapper">
        <div class="column">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
        <div class="column">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
        <div class="column">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
        <div class="column">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
    </div>
</div>

.包装纸{
位置：绝对位置；
溢出-x：自动；
溢出y：隐藏；
排名：0；
左：0；
底部：0；
右：0；
背景颜色：绿色；
}
.内包装{
宽度：20000px；
}
.栏目{
高度：200px；
边框：1px实心#000；
背景颜色：蓝色；
颜色：#fff；
填充：20px；
浮动：左；
}
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。

---

您可以使用javascript动态设置

.internal wrapper

的宽度，以匹配内容的宽度。

您是否可以使用CSS3“columns”属性，如@SteffiA所示。那应该行！我真傻，没能找到那样的东西。你可以把它贴出来作为答案，这样我就可以接受了。