是否有一种 CSS 方式可以使文本水平按列增长答案

【问题标题】：Is there a CSS-way to make text grow column-wise horizontally是否有一种 CSS 方式可以使文本水平按列增长
【发布时间】：2021-05-15 02:22:20
【问题描述】：

我正在为一位客户工作，该客户有一个非常好的主意，可以将水平滚动效果集成到他的单页页面流布局中。这意味着用户不断向下滚动，但在某些时候页面开始从右到左移动，而不是从下到上移动。我是通过 ScrollMagic 实现的。

所以问题在它得到响应时就开始了。当我开始水平滚动时，屏幕现在固定在设备高度，我需要将页面内容在流出时向右扩展，而不是正常的“我的内容只是从底部流出，我可以按照垂直滚动”。

我的第一个想法是在管理内容时手动解决问题。 IE。为移动和桌面内容提供不同版本的内容。但似乎设备太不同了，我需要一个 CSS 解决方案。

我的问题是：你知道如何让内容水平增长吗？像高度自动，但宽度“自动”（这不起作用，因为它不一样）？或者像下面例子中的 display: inline-block 一样，但是外层包装器（黄色边框）包裹了所有的子框，而不仅仅是第一列。

#wrapper {
    display: inline-block;
  border: 2px solid #ffff00;
    
}
#main {
  width: 100%;
  height: 200px;
  border: 1px solid #0000ff;
  display: flex;
  flex-flow: column wrap;
}

#main div {
  width: 100%;
  height: 50px;
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div id="wrapper">
<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:lightgrey;">E</div>
  <div style="background-color:lightgreen;">F</div>
</div>
</div>


</body>
</html>

编辑：在阅读 Temani Afifs Answer 后，我发现了我的问题的附加说明：我需要它与“列宽”一起使用，以便我能够编写在用完所有垂直空间时自动扩展到第二列的文本。很像here。链接示例对我来说不完美的唯一原因是包装容器 div 没有展开并且出现滚动条。我希望能够在右侧添加另一个 .container-div。

【问题讨论】：

标签： css layout flexbox

【解决方案1】：

也许使用 CSS 网格：

#wrapper {
  display: inline-block;
  background:yellow;
}

#main {
  max-height: 100vh;  /* don't take more than the screen height */
  border: 1px solid #0000ff;
  box-sizing:border-box;
  display: grid;
  grid-auto-flow: column; /* column flow */
  /* fill all the column and wrap to the next one if no more space */
  grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
}

#main div {
  padding:20px;
}

body {
  margin: 0;
}

<div id="wrapper">
  <div id="main">
    <div style="background-color:coral;">A</div>
    <div style="background-color:lightblue;">B</div>
    <div style="background-color:khaki;">C</div>
    <div style="background-color:pink;">D</div>
    <div style="background-color:lightgrey;">E</div>
    <div style="background-color:lightgreen;">F</div>
  </div>
</div>

【讨论】：

这已经是一个好的开始。不幸的是，我的情况比我最初要求的要具体一些：您认为可以将其与“列计数”属性结合起来吗？想象一下，只有红色的“A”块，但有很长的文字。期望的行为是文本下降到屏幕底部，只占用左侧列空间，然后，更多文本，扩展到第二列。