javascript - 使用javascript和jquery在div中填充内容（html）以修复高度和宽度

Question

我正在使用 ajax 以 json 形式获取长文本我想在修复高度 div 中填充这些内容

假设我的 div 高度为 500 像素，宽度为 300 像素。字体大小为 16px

我想要任何可以根据 div 的高度和宽度填充数据并可以返回剩余文本的 javascript 递归方法。

如果有人可以做到这一点，请为我提供解决方案。

提前致谢

Answer 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);
}

The variable rest contains the remaining part. Beware that this method uses some approximations, and sometimes may not fill the container to the brim. In some unlucky cases, it may even overflow the container, so you have to run it again until you get the correct size.

Answer 2

为什么不把所有的都放在 div 和你设置的 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());