使文本水平溢出到列中

时间:2013-11-19 05:01:49

标签: html css html5 css3 css-float

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

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

Text Overflow Example

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

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

4 个答案:

答案 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"属性.....