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

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;
}

UPDATE

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

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

PS - 如果你了解jQuery,你将开始使用它来做所有事情.它极大地提高了跨浏览器的兼容性并简化了许多常见任务.