0

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

基本上我想做的是一件非常简单的事情,可以在 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 是可能的,但尚未广泛使用,因此出于可用性原因使用它并不好。

4

3 回答 3

3

您所要求的内容在大多数浏览器中尚不可用,被称为CSS 区域

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

于 2013-09-24T15:22:56.577 回答
0

将溢出从一个 div 转移到另一个

在不同的 div 中继续溢出文本?

希望我能把它放在评论中,但是这里有两个人在做同样的事情,并为此提供了一些解决方案,所有这些都是基于 JS 的。

于 2013-09-24T15:23:35.650 回答
0

您可以尝试多列(css),但浏览器支持有限: http ://css-tricks.com/snippets/css/multiple-columns/

JavaScript 选项可以在这里找到:http: //alistapart.com/article/css3multicolumn

于 2013-09-24T15:25:28.717 回答