javascript – 在一定高度和宽度的div中可以容纳多少内容

2019年7月21日 151次阅读

假设我有1000个单词的内容.我有100X100高度和宽度的多个div,如果需要,我可以创建相同高度和宽度的新div.我如何确定一个div的内容足够多,其余内容将被移动到下一个div,依此类推,直到内容结束. 最佳答案 我同意你的问题的评论者,通常有更好的方法,这样的想法将工作缓慢,当然不是无处不在(
JavaScript布局通常是页面架构中的问题的信号).

但是,有一个解决方案.

您需要测量100×100框中适合的单词数量,并以适当的方式对内容进行切片.为此,您可以使用宽度为100px但高度为auto的不可见div,并在其中添加内容,直到其offsetHeight大于100.因为您可能使用普通字体而不是等宽字体,所以需要进行测量每个盒子.在下面的示例中,我们将根据需要将lorem ipsum文本切片为适合多个100×100的框.它没有得到很好的优化,你可能需要进一步的工作来满足你的目的.

var loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'

var boxParent = document.getElementById('parent');

while (loremIpsum.length > 0) {
    var boxContent = document.createElement('div');
    boxContent.className = 'content __measuring';
    boxParent.appendChild(boxContent);

    var indexOfSpace = loremIpsum.indexOf(' ');
    var lastIndexOfSpace = indexOfSpace;
    while (indexOfSpace != -1 && boxContent.offsetHeight < 100) {
        boxContent.innerHTML = loremIpsum.substring(0, indexOfSpace);
        lastIndexOfSpace = indexOfSpace;
        indexOfSpace = loremIpsum.indexOf(' ', indexOfSpace + 1);
    }
    if (indexOfSpace == -1) {
        boxContent.innerHTML = loremIpsum;
        loremIpsum = '';
    }
    else {
        loremIpsum = loremIpsum.substring(lastIndexOfSpace + 1);
    }

    boxContent.className = 'content';
}
#parent .content {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 8px;
  margin: 8px;
  background: yellow;
  font-family: Arial, sans-serif;
  font-size: 16px;
  box-sizing: border-box;
  vertical-align: top;
  }

#parent .content.__measuring {
  height: auto;
  }
<div id="parent">
</div>
点赞