3

長いテキスト ブロックがあります。このテキストの 2500 文字ごとに、ページネーションを実行できるようにラップしたいと思います<div>。

以下は機能しません。

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

出力：

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

明らかに</div>、これを機能させるには終了タグが必要です。

PHPまたはJavascript/jQueryでこれについて提案がある人はいますか?

4

4 に答える 4

5

を追加するだけ</div>ですか？

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

ただし、javascript を使用するとさらに効果的です。視聴者の画面サイズに応じてページネーションを行うことができます。

HTML を次のように設定するだけです。

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

ページの css を追加します。

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

そして、次のコードを使用します。

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();

これは PHP ソリューションと連携して機能し、javascript が無効になっている場合に下位互換性を提供します。

于 2012-06-30T20:50:26.923 に答える
1

ふざけてみましょう - これはかなり醜い JavaScript RegExp で、テキストを改ページし、単語を分割しないようにします。ただし、膨大な量のテキストでどれだけうまく機能するかはわかりません。

var text = ....
// Grab 2500 (or slightly more if it doesn't exactly end on a word boundary)
// characters, or less than 2500 if it's at the end of the string.
text = text.replace(/(((.|\n){2500,2520}?\b)|((.|\n){1,2499}(?!.)))/mg, 
                    '<div class="individual-page">$1</div>')

jsフィドル

于 2012-06-30T21:35:49.800 に答える
1

これは私が行う方法です：

$out = '';
$text = str_split($text, 2500);
foreach($text as $t){
    $out .= "<div class='individualPage'>".$t."</div>";
}
echo $out;

編集：これは単語をバラバラにするので、そのままにしてwordwrap()ください。:D

于 2012-06-30T20:50:25.513 に答える
1

各反復の最初に開始 div、最後に終了 div、および終了 div を追加するだけです。

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

Javascript には、ビルトイン ソリューションほど優れたものはありません。

var s = text, div = "<div class='individualPage'>";
while(text.length > 5) {
  s = text.slice(0, 5) + "</div>" + div;
  text = text.slice(5);
}
s = div + s + "</div>";
于 2012-06-30T20:51:34.080 に答える