【发布时间】：2013-09-29 21:36:15
【问题描述】：
我想我在这里要问的真的是一个很大的挑战！我什至无法猜测从哪里开始做一些实验......
基本上，我想做的是一件非常简单的事情，可以在 MS Word、OOo Writer、InDesign 等所有应用程序中执行：我需要 3 个相互连接的空文本区域 (div)，以便超过第一个 div 的文本将填充第二个 div，依此类推到第三个 div。
这是我的意思的图形示例：
如您所见，文本从 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 是可能的，但尚未广泛使用，因此出于可用性原因使用它并不好。
【问题讨论】：
-
要求代码的问题必须表明对所解决问题的最低理解。 包括尝试过的解决方案、它们为什么不起作用以及预期的结果。
-
谷歌真的很酷。提供有用的链接，例如developer.mozilla.org/en-US/docs/Web/Guide/CSS/…
-
在纯 CSS 中没有可靠/广泛兼容的方式来做到这一点。有 CSS3 列布局，但它只适用于某些较新的浏览器或使用前缀：请参阅此处 developer.mozilla.org/en-US/docs/Web/Guide/CSS/… 和此处 caniuse.com/multicolumn
-
如果你想要一个完全兼容浏览器的解决方案，你需要使用 JS。