有没有像-webkit-column-gap那样在行中流动文本来模拟“页面”？

时间：2013-06-05 13:58:39

标签： html5 css3 webkit

我正在尝试构建类似Google文档编辑器的近似内容，其中用户编辑的文本可以在页面之间垂直流动，如下所示：

Google Docs text flowing from page to page

到目前为止，我对如何做这样的事情最好的想法是不断测量页面容器中内容的大小，如果超出分配给页面的大小，则以编程方式移动文本到第2页，直到第1页的内容再次适合。

如果没有构建类似Google Docs的布局引擎（传统的文字处理器），我还没有想出更好的东西，但后来偶然发现了-webkit-column-gap（显然只适用于WebKit） ，我现在还好。）

使用-webkit-column-gap，我能够将文字从列移动到列;如果我将文本放在contenteditable div中，它几乎接近我正在寻找的效果 - 当我输入更多时，内容会自动从＆＃34; page＆＃34;到＆＃34;页面＆＃34;，除了＆＃34;页面＆＃34;列中都是并排的，如下所示：

Text flowing from column to column

以下是我使用的HTML：

    <!DOCTYPE html>
    <html lang="en">
       <head>
          <title>Lorem ipsum dolor sit amet</title>
          <meta charset="utf-8"></meta>
          <link rel="stylesheet" href="book.css" type="text/css"/>
       </head>
       <body>
          <div class="body">
             <div class="content" contenteditable="true">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum tempor suscipit. Donec nec mauris leo, in blandit lacus. Nunc a condimentum dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin sagittis porta leo fermentum faucibus. Ut porta, sem sit amet placerat interdum, odio enim ornare nisi, vitae rhoncus lacus erat quis leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc accumsan iaculis nisi, et lacinia turpis fringilla eu. Aliquam adipiscing posuere dui. Integer vel nulla purus. Praesent at eros leo, at facilisis augue. Aliquam aliquam vulputate lacinia. Cras vel leo urna, sed commodo augue. Nullam fringilla eleifend augue ac tincidunt. Maecenas quis velit tortor, sit amet tempor quam.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam tortor, ornare nec rutrum at, eleifend sed odio. Nam dignissim erat a velit interdum a egestas enim ullamcorper. Nulla sit amet massa quis metus congue tincidunt id vitae felis. Praesent at odio a ante molestie viverra. Aenean fringilla nisi sed urna sodales feugiat aliquet diam vehicula. Aliquam erat volutpat. Vivamus facilisis ultricies est nec consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam ac consectetur mi. Vestibulum volutpat rutrum urna, eu vestibulum sem posuere in. Cras volutpat lacinia lorem, vitae commodo quam congue a. Praesent vestibulum placerat nisi ac bibendum. Aenean nec urna quam, id dapibus neque. Quisque elit tellus, condimentum sed semper quis, vulputate a mi.</p>

                <p>Sed ac turpis sed felis condimentum sodales. Nulla facilisi. Vivamus porttitor scelerisque vulputate. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas pellentesque rutrum eleifend. Suspendisse potenti. Sed sed lacus nec velit lobortis pellentesque. Suspendisse in neque lacus. Proin vel risus ullamcorper orci condimentum convallis. Duis quis lectus eu nibh bibendum feugiat. Etiam dapibus dapibus nisl ut interdum. Pellentesque sollicitudin sollicitudin dapibus.</p>

                <p>Nam interdum lobortis augue eleifend suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus pharetra, orci vitae luctus pretium, lectus purus blandit magna, a viverra sapien metus quis libero. Morbi scelerisque sem sed turpis gravida ultricies. Mauris in fringilla risus. Sed non enim vel ipsum aliquet consequat non ut metus. Ut tincidunt ante eget est pretium lobortis tempor erat interdum. Proin faucibus justo odio, sed accumsan erat. Fusce ac risus lacus.</p>

                <p>Etiam condimentum, ligula nec lobortis commodo, lectus sem ultrices ante, vel eleifend lacus tortor eu felis. Vivamus euismod imperdiet libero, sed blandit magna faucibus id. Nulla auctor venenatis suscipit. Integer massa nisi, eleifend nec tincidunt id, aliquam nec metus. Nam ac elit vitae mauris condimentum viverra. Proin pharetra facilisis odio ac facilisis. Pellentesque et nisi malesuada justo pellentesque aliquam ut nec purus. Sed iaculis, nibh at ultricies euismod, turpis magna vulputate libero, non pretium tellus erat ut justo. Sed placerat mattis neque, a tempus purus aliquam in. Sed egestas dapibus magna. Quisque iaculis dictum mauris, non iaculis massa lacinia sit amet. Proin congue quam sed augue mollis volutpat. Morbi velit libero, venenatis ut commodo vel, mollis ut erat.</p>
             </div>
          </div>
       </body>
    </html>

和CSS：

html {
    padding: 0px;
    height: 400px;
    -webkit-column-gap: 0px;
    -webkit-column-width: 200px;
}

p {
    text-align: justify;
}

现在这一切都很好，但我真正喜欢的是＆＃34;页面＆＃34;垂直堆叠，就像上面的Google Docs示例一样。

关于如何做到这一点的任何想法？

1 个答案:

答案 0 :(得分：2)

首先，column-gap属性是标准的CSS功能（来自CSS Multi-column layout规范），适用于所有现代浏览器。您只需要使用不带-webkit-前缀的IE和Opera版本，以及-moz-前缀用于Firefox。

但是，页面的多列规范中没有任何功能。有一个paged media规范，它会做你想要的，但它只适用于打印和打印预览。

Opera提出了一种在打印之外进行分页的建议，该方案适用于多列。这会使用@paged at-rule以及overflow属性上的paged-x，paged-x-controls paged-y或paged-y-controls值。但是，这些页面更像是iPad的页面，其中有分页控件可以转到下一页/上一页，例如通过滑动或按下按钮。这目前只适用于Opera。请参阅此demonstration and explanation。

您可以使用CSS区域来实现您所寻找的内容，但它目前仅适用于IE10（并且需要iframe与该实现）。还有一个实验性的WebKit实现。请参阅CSS Regions spec上的IE10 implementation和信息。

相关问题
最新问题