所以我有一个不允许垂直滚动文本的网页。
这意味着当文本溢出时,我需要它水平溢出。我想要做的是将它分成列。基本上,由于文本部分对于其父级的高度而言太高,它将形成如下列:
我知道可以使用HTML表轻松实现列。但是,我不知道我需要多少列,部分原因是父级的高度可能会发生变化,部分原因是因为我需要它在像字体大小改变时才能工作。我可以想办法用一些javascript来做到这一点,但我想知道:
有没有办法只用HTML和CSS来解决这个问题?
答案 0 :(得分:4)
如果您使用column
属性,文本可以水平流动。
如果你通过http://www.w3.org/TR/css3-multicol/#the-multi-column-model,你会看到有两种方法可以证明这一点。第一个是您使用width
指定列的column-width
。另一个是使用column-count
指定列数的地方。
正如你在问题中提到的那样:
但是,我不知道我需要多少列,部分原因是父级的高度可能会发生变化,部分原因是因为我需要它在字体大小改变时才能工作。
您必须进行计算才能找到宽度或列数。
我对基于文本容器的可用宽度的公式有一个非常模糊的想法,然后使用字体大小并查看一行中可容纳多少个字符。此外,您可以使用行高来查找可容纳在一列中的行数,从而找到近似的宽度/数量。
答案 1 :(得分:0)
此css代码可以帮助您。 -webkit列数:3; -webkit柱 - 间隙:25像素;文本对齐:证明;
答案 2 :(得分:-2)
我找到了你要搜索的内容。https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts
它是css3
答案 3 :(得分:-2)
使用css "overflow:scroll-y"
属性.....