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

我想做的是创建一个网站，以假字母的形式显示我的咆哮。

我希望固定“纸张大小”（div 大小），并且文本继续显示在第一张纸下方显示的第二张纸（第二个 div）上，如下所示。

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

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

仅为了简单起见：

我想出了一个小 JS 脚本，可能会对您有所帮助。它远非完美，但可能会给您一个不错的起点。本质上，它会循环浏览大文本并寻找滚动条出现。您可能需要稍微改变一下计算。

JSFiddle http://jsfiddle.net/Tt9sw/2/ 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 库 http://docs.jquery.com/Downloading_jQuery在你的脚本中。

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

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