文本换行到列

Question

我有无限长度的文本，并且没有垂直滚动条选项的固定高度容器，基本上文本溢出容器，但它是隐藏的。

要求是将此文本包装到与父容器相同的高度列，容器可以选择具有水平滚动条。

这需要在响应式布局中工作 - 这意味着文本父容器高度将更少，并且所有文本列都将重新构建。

E.g。如果当前文本列是较小设备上的初始3列，则可以转到4列或5列。

我搜索了谷歌，但没有找到任何可能的解决方案。

任何解决方案或指南都会有很大的帮助 - 至少知道从哪个方向开始

• CSS或JavaScript，欢迎使用jQuery解决方案。

初始具有高度自动点击按钮来设置高度/设置高度后需要包裹文本并设置列不垂直高度，而不是水平对齐列。

ADD CODE HERE

jsfiddle sample

Answer 1

您可以将数据包装在opendoc中的另一个div中并增加其宽度。

<div class="opendoc"> // width fixed Change Height
      <div class="resizablediv"> // Change the width
          {{Your data}}
      </div>
</div>

Answer 2

我有一个想法，但不是很完美。这些问题总是需要大量的尝试/失败测试......

您需要有两个嵌套元素：

<div class="opendoc">
  <div class="opendoc-inside">
    [Content]
  </div>
</div>

.opendoc将获得固定的高度。 .opendoc-inside将有列和固定宽度;

根据您的设备宽度，您可以选择多个列，我选择2作为示例;

现在使用javascript：

1. 在.opendoc-inside
上设置列2和宽度100％
2. 如果.opendoc-inside的高度大于.opendoc的高度：
   • 将1列和50％添加到.opendoc-inside
   的宽度
   • 转到2
3. 其他你没事。

此解决方案在每次测试时生成回流。这可能变得非常缓慢。 您需要避免在每个resize事件上启动此操作...

Answer 3

为 - http://welcome.totheinter.net/columnizer-jquery-plugin/找到了一个jquery插件。这个解决了我所需要的一切。