Question

我想我在这里要问的是一个很大的挑战！我甚至无法猜测从哪里开始做一些实验...

基本上我想要做的是在MS Word，OOo Writer，InDesign等所有应用程序中可以做的非常简单的事情：我需要3个空文本区域（div）相互连接，以便超过第一个div的文本将填充第二个div，依此类推到第3个div。

这是我的意思的图形示例：

http://i44.tinypic.com/21bj9fn.png

如您所见，文本从DIV＃1开始，但比DIV＃1可以处理的长，因此它会在DIV＃2的开头自动进行，依此类推。

主要问题是我不知道文本有多长，所以有可能我有几个单词或整页，文本需要以这种方式格式化，因为实际上div中的文本是不是一篇文章，而是一大堆小数据。

第二个主要问题是页面必须打印，因此它必须只在一个页面中，并且只是大表单的一小部分。我不能制作很高的单列，否则会打印第二页。

有没有办法用HTML / CSS实现这一点？

编辑：这是我现在的代码，我要问的是，如果在CSS中有一种方法可以使第一个div中的超出文本进入第二个和第三个div，就像上面的图形示例一样。

<style type="text/css">
.text-area {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #FFC;
    text-align: left;
    margin: 20px;
    padding: 5px;
    float: left;
    height: 300px;
    width: 180px;
    border: 1px solid #609;
    overflow: auto;
    font-size: 12px;
}
</style>

<div class="text-area" id="t1">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
<div class="text-area" id="t2"></div>
<div class="text-area" id="t3"></div>

据我所知，CSS3是可行的，但尚未广泛使用，因此出于可用性原因使用CSS3并不好。

Answer 1

大多数浏览器尚未提供您所要求的内容，并称为CSS Regions

支持稍微好一点的替代方案是CSS Columns

Answer 2

Transfer overflow from one div to another

Continuing overflowed text in a different div?

希望我能把它放在评论中，但是这里有两个人在完成同样的事情和一些解决方案之后，所有基于JS的。

Answer 3

您可以尝试多列（css），但浏览器支持有限： http://css-tricks.com/snippets/css/multiple-columns/

可在此处找到JavaScript选项： http://alistapart.com/article/css3multicolumn

在连接的div中流动的文本

3 个答案: