使用 javascript 和 jquery 在 div 中填充 Content(html) 以修复高度和宽度

Question

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

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

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

如果有人能做到，那么请给我解决方案。

提前致谢

Answer 1

首先，将文本包装在<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 包含剩余部分。 请注意，此方法使用了一些近似值，有时可能无法将容器填满。在某些不幸的情况下，它甚至可能会溢出容器，因此您必须再次运行它，直到获得正确的大小。

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