是否可以选择所有溢出特定div的元素并为其提供一些CSS并放置在另一个div中

Question

我想选择所有溢出特定div的元素，并为其提供一些CSS并放置在另一个div中。

就像我有一个高度为400px的div一样，我正在向其中添加json数据，如果内容超出了该div，则我希望将所有外部内容放入另一个div。

if(print_part.offsetHeight<print_part.scrollHeight)
{
    var body=document.getElementById("body");
    $("body").append(
        '<page size="A4" id="A4Page" style="margin-top:0px;!important"><div class="main_Header"><h5>AMERICAN UNIVERSITY OF ANTIGUA</h5></div></page>'


        );
}

Answer 1

在这里您可以快速完成此操作。暂时可以改善这一点。这就是背后的想法。

const e = document.getElementById('overflow');

if (e.scrollHeight - e.clientHeight > 0) {  
  const lineHeight = getLineHeight(e);
  
  let allLines = e.innerHTML.match(/[^\r\n]+/g);
  
  const linesToShow =  Math.trunc(e.clientHeight / lineHeight);
  
  const linesToMove = allLines.slice(linesToShow, allLines.length - 1);
  
  const originalDivContent = allLines.slice(0, linesToShow - 1);
  e.innerHTML = originalDivContent.join('\n');
  
  const containerDivContent = linesToMove.join('\n');
  const container = document.getElementById('container');
  container.innerHTML = containerDivContent;
  
}

function getLineHeight(element) {
  const clone = element.cloneNode();
  clone.innerHTML = '<br>';
  element.appendChild(clone);
  singleLineHeight = clone.offsetHeight;
  clone.innerHTML = '<br><br>';
  doubleLineHeight = clone.offsetHeight;
  element.removeChild(clone);
  return doubleLineHeight - singleLineHeight;
}

.fix {  
  width: 200px;
  max-height: 100px;
  border: 1px solid red;
}

.container {
  width: 200px;
  border: 1px solid blue;
}

<div id="overflow" class="fix">
 aaaaaaaaaaaaaa
 aaaaaaaaaaaaa
 aaaaaaaaaa
 aaaaaaaaaaaaa
 aaaaaaaaaaaaaaa
 aaaaaaaaaaaaaa
 aaaaaaaaaaaaaaaaa
 aaaaaaaaa
 aaaaaaaaa
 aaaaaa
 aaaaaaaaaaa
 aaaaaaaaa
 
</div>

<div id="container" class="container"></div>

Answer 2

不幸的是，这并非您想象的那样容易。

您真的必须带走每个内容项，找出它们的高度。如果parentSize

您可以添加一些已经编写的代码吗？

问候