如何適當地將內容合併到div

我不知道如何標題這個問題，我真的不知道如何問它，但這是我的問題。我從我的PHP服務器獲得大量數據，並且正在創建一本書來保存這些數據。擁有我的書單頁的div只有500px寬×800px高，所以當我將內容提供給div時，它會溢出div。是否可以計算適合500 x 800 px div的內容量，然後將正在投放的內容分成多個大小相同的div？如何適當地將內容合併到div

來源

2014-01-14 Juan Gonzales

雖然這是可能的，你究竟想要完成什麼？你是否試圖將這些'頁面'保存到你的數據庫中，或者只是一次顯示在瀏覽器中？在這種情況下，'page'和'book'是什麼意思？ –

Nick M我想一次將它顯示到瀏覽器。 –

我創建了一本在線圖書，其中包含來自服務器的數據，並且我需要它將其作爲500x800 –

我已經做了的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);

UPDATE：認爲這將是一個非常有用的訣竅在各種情況下使用，所以我創建了一個附件如何在這裏的博客教程http://anilmaharjan.com.np/blog/2014/01/paging-a-long-text-into-a-specific-size-document-like-pages-using-javascript

來源

2014-01-14 05:59:16

-3

確保div樣式具有

Height:auto;

編輯：對不起，我誤解你的問題。我想如果你知道內容是怎麼樣的，你可以用某種方式安排它們。使用JavaScript，你可以檢查內容是否溢出。檢查here ....按字符刪除字符，直到沒有溢出。

來源

2014-01-14 05:14:52

這不是他想要做的 - 「500像素寬×800像素」。 –

我不想改變div的大小。它必須保持500px x 800px。 –

對不起，我跳到了帖子按鈕。請檢查我的新答案。 –

服務器端;計算字符或單詞，一旦你達到某個預定義的數字（你將不得不通過實驗找出 - 這也取決於瀏覽器等），然後將其切斷並創建一個「頁面」，並繼續，直到沒有字符離開。

客戶端;將div的最小高度設置爲任何你想要的（800px），然後解析你的文本，並一次一個字，並將其添加到div中。每次執行此操作時，請檢查div是否已更改高度，如果是，請刪除最後一個單詞，然後開始添加到新頁面。

無論哪種方式，這不是很漂亮，我會重新考慮（如果可能）你如何獲取/使用你的數據。

來源

2014-01-14 05:31:50

如何適當地將內容合併到div

回答

相關問題