Question

我要做的是创建一个以虚假信函形式显示我的咆哮的网站。

我希望修复“纸张尺寸”（div尺寸），然后在第二张纸张（第二个div）上继续显示的文字就像这样显示在第一张纸张的下方..

我道歉，作为一个新用户，我不允许发布   我创建的截图是为了帮助解释我的情况，所以我被迫了   链接，直到我有足够的声誉点：

http://img16.imageshack.us/img16/5538/pagesuc.jpg

仅仅是为了简单起见： 我创建了一个简单的html / css页面，以最简单的形式演示我要用代码完成的工作：

<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: 0;
}
.container {
    background: #FFFFFF;
    width: 600px;
    height: 400px;
    margin: 0 auto;
}
#lbox {
    background: #F00;
    width: 300px;
    height: 400px;
    float: left;
}
#rbox {
    background: #00F;
    width: 300px;
    height: 400px;
    float: right;
}
.flowcontent {
    padding: 10px 50px;
}
</style>

<div class="container">
  <div id="lbox">
    <div class="flowcontent">
      <p>Lorem Ipsum...</p>
    </div>
  </div>
  <div id="rbox">
    <div class="flowcontent"> </div>
  </div>
</div>

截图：

我道歉，作为一个新用户，我不允许发布   我创建的截图是为了帮助解释我的情况，所以我被迫了   链接，直到我有足够的声誉点：

http://img689.imageshack.us/img689/7853/overflowc.jpg

在这种情况下，我希望红色div的溢出继续在右边的蓝色div中。

我意识到单独使用HTML / CSS可能无法做到这一点，但希望CSS3可能会有一些新的技巧，因为它有更高级的列处理..如果这是不行，有没有人有一个建议使用PHP甚至JavaScript或JQuery来解决这个问题的合理方法？

我知道PHP，但我仍然是JS / JQ newb，所以我提供了一些（希望）非常简单的示例代码供任何人插入他们自己的JS / PHP示例。

无论如何，谢谢你的时间。

Answer 1

我想出了一个可以帮助你的小型JS脚本。它远非完美，但可能会给你一个不错的起点。从本质上讲，它会遍历您的大文本并查找要显示的滚动条。您可能需要稍微改变计算。

JSFiddle http://jsfiddle.net/Tt9sw/2/

<强> JS

var currentCol = $('.col:first');
var text = currentCol.text();
currentCol.text('');
var wordArray=text.split(' ');

$.fn.hasOverflow = function() {
   var div= document.getElementById($(this).attr('id')); 
   return div.scrollHeight>div.clientHeight;
};

for(var x=0; x<wordArray.length; x++){
    var word= wordArray[x];
    currentCol.append(word+' ');
    if (currentCol.hasOverflow()){
        currentCol = currentCol.next('.col');
    }
}

<强> HTML

<div class="col" id="col1">Lorem Ipsum ....... LONG TEXT .......</div>
<div class="col" id="col2"></div>
<div class="col" id="col3"></div>
<div class="col" id="col4"></div>
<div class="col" id="col5"></div>

<强> CSS

.col{
   width:200px;
   float:left;
   height:200px;
   border:1px solid #999;
   overflow:auto;
   font-family:tahoma;
   font-size:9pt;
}

<强>更新

对于此示例，您必须在脚本中包含jQuery Libray。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"  type="text/javascript"></script>

PS - 如果你了解jQuery，你将开始将它用于一切。它极大地提高了跨浏览器的兼容性并简化了许多常见任务。

Answer 2

你想要的是Adobe提出的CSS Regions模块，目前零浏览器支持。如果您真的感兴趣，Adobe确实发布了一个非常粗略的基于webkit的浏览器来播放规范。但正如其他人所说，现在你是SOL，需要找到另一种解决方案。

Answer 3

CSS3有Multi-column Layout Module。但是，我怀疑它现在得到了广泛的支持。

在目标浏览器上进行测试：http://www.quirksmode.org/css/multicolumn.html

Answer 4

您不能仅使用HTML和CSS执行此操作。 CSS主要针对Web浏览器，布局模型是垂直扩展表面上的文档。您可以使框自动高度（默认值）或固定高度，但您无法更改内容属于父框的方式（这是您需要的工作方式）。

如果这对您非常重要，您可以考虑一些选项：

使用CSS内置的分页媒体功能，在呈现到分页媒体（例如打印输出）时提供良好的分页;我说的是page-break-after，page-break-before等属性。您不会在网页浏览器中获取网页，但至少可以控制它在实体纸上的打印方式
写一些令人难以置信的聪明的JavaScript，将您的内容划分为页面。这里有一个恶性循环，因为在你尝试之前你不会知道你的内容是否合适，所以你可能需要以反复试验的方式多次回流。如果您的内容具有特殊结构，则可以利用，例如：一个诗歌形式，其中所有换行都是明确的，或者如果你使用固定宽度的字体，那么可以使用一次通过算法，你甚至可以使用PHP，ASP.NET，在服务器端进行，或任何其他服务器端脚本技术。
使用不同的文档格式，可以控制页面结构中页面和元素的绝对位置，例如： PDF。（我不建议将PDF用于一般的网络文档;从用户的角度来看，PDF根本不方便）。
使用Flash或Silverlight之类的东西来生成所需的布局。这也是你应该避免的事情，除非你还有其他原因可以使用它;此外，格式化算法会遇到与javascript实现相同的问题，除了您可以更好地控制渲染部分（字体，字距调整等）。

然而，对于网络上的大多数事情，我只是放弃了这个想法，并采用更加可实现的设计。

Answer 5

如果您知道其中一个页面包含多少个字符，您可以使用javascript或php动态分隔字符串，然后在第一个“纸张”中打印数组的第一部分，在第二个上打印第二部分。

只使用HTML / CSS

，您将无法做到这一点

Answer 6

Shapes by Adobe确实如此，但它的浏览器支持非常有限。

IE：11 +

Chrome：37 +

FireFox：32 +

在另一个div中继续溢出文本？

6 个答案: