使文本水平溢出到列中

Question

所以我有一个不允许垂直滚动文本的网页。

这意味着当文本溢出时，我需要它水平溢出。我想要做的是将它分成列。基本上，由于文本部分对于其父级的高度而言太高，它将形成如下列：

我知道可以使用HTML表轻松实现列。但是，我不知道我需要多少列，部分原因是父级的高度可能会发生变化，部分原因是因为我需要它在像字体大小改变时才能工作。我可以想办法用一些javascript来做到这一点，但我想知道：

有没有办法只用HTML和CSS来解决这个问题？

Answer 1

如果您使用column属性，文本可以水平流动。

如果你通过http://www.w3.org/TR/css3-multicol/#the-multi-column-model，你会看到有两种方法可以证明这一点。第一个是您使用width指定列的column-width。另一个是使用column-count指定列数的地方。

正如你在问题中提到的那样：

  

但是，我不知道我需要多少列，部分原因是父级的高度可能会发生变化，部分原因是因为我需要它在字体大小改变时才能工作。

您必须进行计算才能找到宽度或列数。

我对基于文本容器的可用宽度的公式有一个非常模糊的想法，然后使用字体大小并查看一行中可容纳多少个字符。此外，您可以使用行高来查找可容纳在一列中的行数，从而找到近似的宽度/数量。

Answer 2

此css代码可以帮助您。 -webkit列数：3; -webkit柱 - 间隙：25像素;文本对齐：证明;

Answer 3

我找到了你要搜索的内容。https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts 它是css3

Answer 4

使用css "overflow:scroll-y"属性.....