[英]Text pagination inside a DIV with image
我想在某個div中對文本進行分頁,使其適合允許的區域
邏輯很簡單:
1.把文字分成單詞
2.逐字添加並計算元素高度
3.如果我們超過高度-創建下一頁
效果很好
這是我使用過的JS函數:
function paginate() {
var newPage = $('<pre class="text-page" />');
contentBox.empty().append(newPage);
var betterPageText='';
var pageNum = 0;
var isNewPage = false;
var lineHeight = parseInt(contentBox.css('line-height'), 10);
var wantedHeight = contentBox.height() - lineHeight;
for (var i = 0; i < words.length; i++) {
if (isNewPage) {
isNewPage = false;
} else {
betterPageText = betterPageText + ' ' + words[i];
}
newPage.text(betterPageText + ' ...');
if (newPage.height() >= wantedHeight) {
pageNum++;
if (pageNum > 0) {
betterPageText = betterPageText + ' ...';
}
newPage.text(betterPageText);
newPage.clone().insertBefore(newPage)
betterPageText = '...';
isNewPage = true;
} else {
newPage.text(betterPageText);
}
}
contentBox.craftyslide({ height: wantedHeight });
}
但是,當我添加圖像時,它會破壞一切。 在這種情況下,文本溢出“綠色”區域。
工作提琴: http : //jsfiddle.net/74W4N/7/
是否有更好的方式對文本進行分頁並計算元素高度?
除了要計算的變量更多以外,不僅包括單詞的寬度和高度,還包括新行,邊距填充以及每個瀏覽器如何輸出所有內容。
然后添加圖像(如果圖像更大或更大,則最大寬度或高度幾乎不可能),如果圖像較小,則還具有邊距/填充。 它可以從一行的末尾開始,因此可以再次拆分所有內容。基本上僅在第一頁上,您可以通過計算圖像的width + margin和height + margin / lineheight來添加圖像。 但這需要大量的數學運算才能得到想要的結果。
說我前段時間嘗試編寫類似的腳本,但停止了導致許多問題和不同瀏覽器結果的原因。
現在閱讀您的問題時,我遇到了一段時間前讀到的內容:
-webkit-column-count
因此,我對您的函數采用了另一種方法,而忽略了所有這些計算。
不要像我剛才編寫的那樣判斷代碼。(我在chrome上進行了測試,其他瀏覽器需要不同的前綴。)
var div=document.getElementsByTagName('div')[0].firstChild,
maxWidth=300,
maxHeigth=200,
div.style.width=maxWidth+'px';
currentHeight=div.offsetHeight;
columns=Math.ceil(currentHeight/maxHeigth);
div.style['-webkit-column-count']=columns;
div.style.width=(maxWidth*columns)+'px';
div.style['-webkit-transition']='all 700ms ease';
div.style['-webkit-column-gap']='0px';
//if you change the column-gap you need to
//add padding before calculating the normal div.
//also the line height should be an integer that
// is divisible of the max height
這是一個例子
在首頁添加小於最大高度和寬度的圖像不會使所有內容混亂。
並且看起來現在所有現代瀏覽器都支持它(帶有正確的前綴)。
以我的經驗,嘗試計算和重新定位HTML中的文本幾乎是徒勞的。 瀏覽器,操作系統和字體問題之間存在太多差異。
我的建議是利用CSS overflow
屬性。 此,結合使用em
上漿高度,應允許你定義一個div
塊,僅示出了一個定義的行數(無論該字體的大小和類型)。 結合一些JavaScript來滾動包含的div元素,就可以進行分頁了。
我在JSFiddle中匯集了一個快速的概念證明,您可以在這里查看: http : //jsfiddle.net/8CMzY/1/
它缺少上一個按鈕和一種顯示頁數的方法,但是這些應該是非常簡單的補充。
編輯:我最初鏈接到JSFiddle概念的錯誤版本
通過使用jQuery.clone()方法並在原始HTML元素的隱藏副本上執行所有計算來解決
function paginate() {
var section = $('.section');
var cloneSection = section.clone().insertAfter(section).css({ position: 'absolute', left: -9999, width: section.width(), zIndex: -999 });
cloneSection.css({ width: section.width() });
var descBox = cloneSection.find('.holder-description').css({ height: 'auto' });
var newPage = $('<pre class="text-page" />');
contentBox.empty();
descBox.empty();
var betterPageText = '';
var pageNum = 0;
var isNewPage = false;
var lineHeight = parseInt(contentBox.css('line-height'), 10);
var wantedHeight = contentBox.height() - lineHeight;
var oldText = '';
for (var i = 0; i < words.length; i++) {
if (isNewPage) {
isNewPage = false;
descBox.empty();
}
betterPageText = betterPageText + ' ' + words[i];
oldText = betterPageText;
descBox.text(betterPageText + ' ...');
if (descBox.height() >= wantedHeight) {
if (i != words.length - 1) {
pageNum++;
if (pageNum > 0) {
betterPageText = betterPageText + ' ...';
}
oldText += ' ... ';
}
newPage.text(oldText);
newPage.clone().appendTo(contentBox);
betterPageText = '... ';
isNewPage = true;
} else {
descBox.text(betterPageText);
if (i == words.length - 1) {
newPage.text(betterPageText).appendTo(contentBox);
}
}
}
if (pageNum > 0) {
contentBox.craftyslide({ height: wantedHeight });
}
cloneSection.remove();
}
現場演示: http : //jsfiddle.net/74W4N/19/
實際上,我基於@cocco所做的事情找到了一個更簡單的解決方案,該解決方案也可以在IE9中使用。 對我來說,保持向后兼容性和動畫等無關緊要,因此我將它們剝離了很重要。 您可以在這里看到它: http : //jsfiddle.net/HNF3d/63/
它的核心是我不限制高度,而將水平分頁顯示為垂直。
var parentDiv = div = document.getElementsByTagName('div')[0];
var div = parentDiv.firstChild,
maxWidth = 300,
maxHeigth = 200,
t = function (e) {
div.style.webkitTransform = 'translate(0,-' + ((e.target.textContent * 1 - 1) * maxHeigth) + 'px)';
div.style["-ms-transform"] = 'translate(0,-' + ((e.target.textContent * 1 - 1) * maxHeigth) + 'px)';
};
div.style.width = maxWidth + 'px';
currentHeight = div.offsetHeight;
columns = Math.ceil(currentHeight / maxHeigth);
links = [];
while (columns--) {
links[columns] = '<span>' + (columns + 1) + '</span>';
}
var l = document.createElement('div');
l.innerHTML = links.join('');
l.onclick = t;
document.body.appendChild(l)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.