在 <div> 中每 2500 个字符换行一次文本.使用 PHP 或 javascript 进行分页

我有一个很长的文本块.我想将这段文本的每 2500 个字符包装成一个 <div> 这样我就可以对它进行分页.

以下不起作用:

//为了本示例的目的，将 2500 替换为 5$text="sfdkjas;fakska;ldjk";$text=wordwrap($text, 5, '<div class="individualPage">');

输出:

sfdkj
as;fa
kska;l
djk

显然我需要结束 </div> 标签来完成这项工作.

有人在 PHP 或 Javascript/jQuery 中对此有什么建议吗?

解决方案

只需添加</div> 然后?

$text = '
'.wordwrap($text, 5, '</div><div class="individualPage">').'</div>';

<小时>

但是，您可以使用 javascript 做得更好:您可以根据观众的屏幕尺寸进行分页.

只需将您的 HTML 设置为:

<div id="target">...</div>

为页面添加一些css:

#target {空白:预包装；/* 尊重换行符 */}.individualPage {边框:1px纯黑色；填充:5px；}

然后使用以下代码:

var contentBox = $('#target');//获取文本作为类似单词的数组var words = contentBox.text().split(' ');函数分页(){//创建一个div来构建页面var newPage = $('<div class="individualPage"/>');contentBox.empty().append(newPage);//从没有页面文本开始var pageText = null;for(var i = 0; i < words.length; i++) {//将下一个单词添加到pageTextvar betterPageText = pageText ?pageText + ' ' + words[i]:词[i];newPage.text(betterPageText);//检查页面是否过长if(newPage.height() > $(window).height()) {//还原文本newPage.text(pageText);//并在文档的开头插入页面的副本newPage.clone().insertBefore(newPage);//开始一个新页面页面文本 = 空；} 别的 {//这个较长的文本仍然适合pageText = betterPageText;}}}$(window).resize(paginate).resize();

这将与 PHP 解决方案结合使用，在禁用 javascript 时提供向后兼容性.

I have a long block of text. I'd like to wrap every 2500 characters of this text into a <div> such I could do pagination on it.

The following doesn't work:

//replace 2500 for 5 for purpose of this example
$text="sfdkjas;fakska;ldjk";
$text=wordwrap($text, 5, '<div class="individualPage">');

output:

sfdkj<div class="individualPage">as;fa<div class="individualPage">kska;l<div
class="individualPage">djk

Obviously I need the closing </div> tag to make this work.

Does anyone have a suggestion for this in PHP or Javascript/jQuery?

解决方案

Just add the </div> then?

$text = '<div class="individualPage">'
      . wordwrap($text, 5, '</div><div class="individualPage">')
      . '</div>';

---

However, you can do even better with javascript: you can paginate in response to the viewer's screen size.

Just set your HTML to:

<div id="target">...</div>

Add some css for pages:

#target {
    white-space: pre-wrap; /* respect line breaks */
}
.individualPage {
    border: 1px solid black;
    padding: 5px;    
}

And then use the following code:

var contentBox = $('#target');
//get the text as an array of word-like things
var words = contentBox.text().split(' ');

function paginate() {
    //create a div to build the pages in
    var newPage = $('<div class="individualPage" />');
    contentBox.empty().append(newPage);

    //start off with no page text
    var pageText = null;
    for(var i = 0; i < words.length; i++) {
        //add the next word to the pageText
        var betterPageText = pageText ? pageText + ' ' + words[i]
                                      : words[i];
        newPage.text(betterPageText);

        //Check if the page is too long
        if(newPage.height() > $(window).height()) {
            //revert the text
            newPage.text(pageText);

            //and insert a copy of the page at the start of the document
            newPage.clone().insertBefore(newPage);

            //start a new page
            pageText = null;
        } else {
            //this longer text still fits
            pageText = betterPageText;             
        }
    }    
}

$(window).resize(paginate).resize();

This will work in conjunction with the PHP solution, providing backwards compatibility if javascript is disabled.