1

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

谢谢。

4

3 回答 3

1

CSS Regions 在这里可能是一个很大的帮助，但截至今天，它们正在开发中，并且几乎没有浏览器支持。

但是你可以使用的是column-count和column-gap

这是我制作的小提琴：http: //jsfiddle.net/MadLittleMods/wpTX7/

这是一些将其水平拆分为 200px 高度内的列的 css。

#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（将 # 列更改为您需要的任何内容）：

$('.no-csscolumns > #overflow_horizontal').columnize({ 
    columns: 3
});​
于 2012-10-12T02:16:10.210 回答
0

1. 插入 -> 分节符 -> 分节符（下一页分节符）。

2. 文件 -> 页面设置 -> 设置横向

于 2012-10-12T02:15:41.957 回答
0

我不知道你为什么要这样做，它听起来不像一个功能性网页，但如果你只是将元素宽度设置为 10000px 并溢出到自动你将能够让文本跑掉屏幕的一侧。

http://jsfiddle.net/NHD2e/

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

于 2012-10-12T02:15:56.623 回答