Question

我不确定如何标题这个问题我也不确定如何问它，但这是我的问题。我从PHP服务器获得了大量数据，而且我正在创建一本书来保存这些数据。保存我书的单页的div只有500px宽x 800px高，所以当我将内容提供给div时，它会溢出div。是否可以计算适合500 x 800 px div的内容量，然后将提供的内容分成多个大小的div？

Answer 1

服务器端;计算字符或单词，一旦你达到某个预定义的数字（你必须通过实验弄清楚 - 这也取决于浏览器等）然后将其剪掉并创建一个“页面”，并继续直到没有字符为止。

客户端;将div的最小高度设置为您想要的任何值（800px），然后解析文本并一次单词并将其添加到div中。每次执行此操作检查div是否已更改高度，如果是，请删除最后一个单词，然后开始添加到新页面。

无论哪种方式都不是很好，我会重新考虑（如果可能的话）你如何获取/使用你的数据。

Answer 2

我为你做了一个jsfiddle：

http://jsfiddle.net/GKZ48/

HTML

<div id="long-content">very long content here ...</div>

Javascript看起来像这样

var pageCount = $('#long-content').height()/800;
var contentLength = $('#long-content').text().length;
var perPageLength = Math.floor(contentLength/pageCount);
console.log(perPageLength)
//var re = new RegExp("(.{1,"+perPageLength+"})",'g'); 
//var chunks = $('#long-content').text().match(re);
var chunks = [];
for(i=0;i<=pageCount;i++){
    chunks.push($('#long-content').text().substring(i*perPageLength,i*perPageLength+perPageLength))
    console.log(i);
     console.log(perPageLength);
      console.log(pageCount);
}
console.log(chunks);
var paged = '<div class="page">'+chunks.join('</div><div class="page">')+'</div>';
$('#long-content').html(paged);

更新：认为这将是一个非常有用的技巧，可以在各种场景中使用，所以我在我的博客中创建了详细的如何教程http://anilmaharjan.com.np/blog/2014/01/paging-a-long-text-into-a-specific-size-document-like-pages-using-javascript

Answer 3

确保div样式

Height:auto;

编辑：抱歉，我误解了你的问题。我想如果你知道内容是什么样的，你可以用某种方式安排它们。使用javascript，您可以检查内容是否溢出。检查here ....逐个字符删除，直到没有溢出。

如何恰当地将内容放入div中

3 个答案: