3

jsonフォームでajaxを使用して長いテキストを取得していますこれらのコンテンツを修正高さdivに入力したい

divの高さが500px、幅が300pxだとします。フォントサイズは16pxです

divの高さと幅に応じてデータを入力し、残りのテキストを返すことができるjavascript再帰メソッドが必要です。

誰かがそれを行うことができるなら、私に解決策を提供してください。

前もって感謝します

4

2 に答える 2

1

まず、テキストを a で囲み、<span>に入れます<div>。私はそれdivがあなたの固定サイズの要素であると仮定しています:

// Be careful about text nodes, or use firstElementChild instead
var span = div.firstChild, text = span.innerText, rest = "";
if (span.offsetHeight > 500) {
    var totalLength = 0, markLength, i = 0,
        rects = span.getClientRects();
    for (; i < rects.length; i++) {
        totalLength += rects[i].right - rects[i].left;
        if (rects[i].bottom - rects[0].top <= 500)
            markLength = totalLength;
    }
    var mark = Math.floor(text.length * markLength / totalLength);
    span.textContent = text.substring(0, mark);
    rest = text.substring(mark);
}

変数restには残りの部分が含まれます。この方法では近似値が使用されるため、コンテナがいっぱいにならない場合があることに注意してください。不運なケースでは、コンテナがオーバーフローすることもあるため、正しいサイズになるまで再度実行する必要があります。

于 2012-05-23T07:41:44.280 に答える
0

すべてを div に入れて、overflow="hidden" を設定した div に入れないのはなぜですか

一時的な div を作成し、幅を修正し、高さを超えるまでテキストを追加してから停止し、その後、すべてのコンテンツをメイン div にコピーします

var s = 'Your long long long long long long long long long long content';
var i = 0;
var tmpdiv = $('<div style="width:50px; height:auto; position:absolute; left:-99999px"/>').appendTo(document.body);
while (i < s.length-1 && tmpdiv.height() < 50){
  tmpdiv.append(s[i]);
  i++;
}

$('#fixdiv').html(tmpdiv.html());
于 2012-05-23T07:10:15.287 に答える