要素の高さに基づいて段落を分割する最も効率的な方法

Question

非常に長いHTML段落要素を特定の高さの小さな段落に動的に分割する最も効率的な方法は何ですか？

以下の関数（jQuery）は、テキストから一度に1単語ずつ繰り返してチョップし、新しい長さをチェックし、テキストが許容範囲内の小さな塊に分割されると停止します。

function split_par(element, max_height) 
{ 
    if (element.height() <= max_height) 
    return; 
    var array = element.text().split(" "); 
    var pos = 0; 
    while (element.height() > max_height) 
    { 
    pos -= 1; 
    element.html("<p>" + array.slice(0,pos).join(" ") + "</p>"); 
    } 
    var next_par = element.clone(); 
    next_par.html("<p>" + array.slice(pos).join(" ") + "</p>"); 
    $('body').append(next_par); 
    split_par(next_par, max_height); 
} 

これは非効率的で時間がかかりますが、これは私が見つけた最も信頼できる方法です。私は良い方法があると確信しています。私はJavascriptやjQueryにも慣れていないので、コードに関する一般的なヒントを理解できます。

Answer 1

おそらく、コンテナ要素（例：divs）にテキストを配置し、Jquery Masonryのようなものを使用すると、このトリックが実行されます。