使文本水平溢出为列

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-column-count:3;-webkit-column-gap:25px;text-align:justify；

Answer 3

我找到了你要找的东西。https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts，它的css3