CSS将溢出的内容移动到相邻列

ca1c2owp  于 2023-08-08  发布在  其他
关注(0)|答案(1)|浏览(80)

是否可以将垂直溢出的内容移到单独的列中。
例如:
我们有两个divs

<div class="col-1">
   Overflowing content
</div> 
<div class="col-2">
  Move overflowed content into here
</div>

字符串
这可能吗
我试着去找,如果可能的话,不能

xkrw2x1b

xkrw2x1b1#

不可能与原始的CSS。你需要一些JavaScript。下面是一个正在计算溢出并手动移动内容的示例。

<div class="col-1" id="col-1">
   Overflowing content
</div> 
<div class="col-2" id="col-2">
  <!-- Move overflowed content into here -->
</div>

<script>
  window.addEventListener('load', function() {
    const col1 = document.getElementById('col-1');
    const col2 = document.getElementById('col-2');

    // Assuming some threshold for overflow
    const maxHeight = 300; // Change to your desired maximum height

    // Split the content by some logical separator, like line breaks
    const lines = col1.innerHTML.split('<br>');

    while (col1.scrollHeight > maxHeight && lines.length > 0) {
      col2.innerHTML = lines.pop() + '<br>' + col2.innerHTML;
      col1.innerHTML = lines.join('<br>');
    }
  });
</script>

字符串

相关问题