文本换行到列

Text wrap to columns

本文关键字：换行 文本      更新时间：2023-09-26

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

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

所有这些都需要在响应式布局中工作-这意味着文本父容器的高度将会降低，并且所有的文本列都将被重构。

。如果当前文本列最初是3列，在较小的设备上可以转到4列，或5列。

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

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

  • 欢迎CSS、JavaScript、jQuery解决方案。

初始有高度自动点击按钮设置高度/设置高度后需要换行的文本和设置在列不超过垂直高度，而是将列水平对齐。

ADD CODE HERE

jsfiddle示例

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

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

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

你需要有两个嵌套的元素:

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

。Opendoc将接收一个固定的高度。.opendoc-inside将有列和固定宽度;

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

现在使用javascript:

  1. 在。opendoc-inside上设置列2和宽度100%
  2. 如果.opendoc-inside的高度大于.opendoc的高度:
    • 为。opendoc-inside的宽度增加1列和50%
    • goto 2

该解决方案在每个测试上生成一个回流。这可能会变得非常缓慢。您需要避免在每次调整大小事件时启动此操作…

找到- http://welcome.totheinter.net/columnizer-jquery-plugin/的jquery插件。

相关文章：