Question

众所周知，除非你将溢出转为隐藏，否则无论你是否有固定的高度，文字都会从上到下。我想知道是否有办法让文字从垂直变为水平。有点像在大屏幕上打开一个大的MS字，你可以看到左侧的第一页和右侧的第二页。我想在我计划的网站上实现同样的效果。

感谢。

Answer 1

CSS区域在这方面可以提供很大的帮助，但截至今天，它们正在进行中并且几乎没有浏览器支持。

但您可以使用column-count和column-gap

这是一个小提琴：http://jsfiddle.net/MadLittleMods/wpTX7/

这是一些css，可以在200px高度内水平分割成列。

#overflow_horizontal 
{
    height: 200px;
    overflow: scroll;

    -moz-column-count: 2;
    -moz-column-gap: 24px;
    -webkit-column-count: 2;
    -webkit-column-gap: 24px;
    column-count: 2;
    column-gap: 24px;
}

修改

这是一个后备。 jsFiddle：http://jsfiddle.net/MadLittleMods/SEDaQ/

小提琴确实可以工作，但不适用于IE9，因为它不喜欢文本/普通资源。如果你能给我一个Columnizer的静态链接，我可以更新小提琴，它会正常工作。

添加Modernizr和Columnizer。

添加此jQuery（将＃columns更改为您需要的任何内容）：

$('.no-csscolumns > #overflow_horizontal').columnize({ columns: 3 });

Answer 2

1。插入 - ＆gt;休息 - ＆gt;分节符（下一页分节符）。

2。档案 - ＆gt;页面设置 - ＆gt;设置景观

Answer 3

我不确定你为什么要这样做，它听起来不像是一个功能性的网页，但如果你只是设置元素宽度，10000px并溢出到auto，你就可以让文字在屏幕的一侧运行。

http://jsfiddle.net/NHD2e/

还有这个问题：Continuing overflowed text in a different div?

水平流动文本

3 个答案: