CSS

将溢出从一个div转移到另一个

发布于 2021-02-02 16:36:53

情况:我有两个固定高度的div,两个溢出都设置为隐藏,并且第一个div中包含动态文本内容。如果该内容超出了第一个div的溢出边界,我希望它自动溢出到第二个div中。

我的问题就是该怎么做?我进行了研究,发现最接近的是一个JQuery插件,该插件会自动为类似报纸的布局创建列。尽管这并不是我真正需要的,但它确实使我希望可以在一个更简单的级别上实现。

可视示例:

  <html>
     <head>
       <style type="text/css">
          div{height:1in;width:4in;overflow:hidden}
        </style>
     </head>
    <body>
     <div id="d1">...(enough text to cause overflow exceeding 1in height)...</div>
     <div id="d2">...(the rest of the text that got cut off from the first div)...</div>
    </body>
   </html>

谢谢大家!根据所有输入,我将其组合在一起。注意:这可能不适合每个人的目的:

  1. 我在JQuery中做到了
  2. 这是非常概念的
  3. 每个其他项目都是其自己的元素,而不仅仅是打开文本
  4. 我已经知道我的需要,一个div不会超过溢出限制

话虽如此:

HTML

<html>
<head>
<style type="text/css">
    #base{border:1px black solid;height:2in;width:3in;overflow:hidden;}
    #overflow{border:1px black solid;width:3in;}
    .content{width:2in}
</style>
<script type="text/javascript" src="ref/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="work.js"></script>
</head>
<body>
<div id="base">
    <div id="sub"></div>
</div>
<br />
<div id="overflow">
</div>

JQ

$(document).ready(function(){

//  An array of content, loaded however you wish
var items=new Array();
items[0]='<div class="content" id="C0" style="border:1px blue solid;height:.75in">content 1</div>';
items[1]='<div class="content" id="C1" style="border:1px green solid;height:.75in">content 2</div>';
items[2]='<div class="content" id="C2" style="border:1px red solid;height:.75in">content 3</div>';
items[3]='<div class="content" id="C3" style="border:1px yellow solid;height:.75in">content 4</div>';
items[4]='<div class="content" id="C4" style="border:1px orange solid;height:.75in">content 5</div>';

//  Variable for the height of the parent div with the fixed width
var baseheight=$("#base").css('height').substring(0,$("#base").css('height').length-2);

//  Function to dynamically get the height of the child div within the fixed width div
function subheight(){return $("#sub").css('height').substring(0,$("#sub").css('height').length-2);}

// For each individual piece of content...
for(i=0;i<items.length;i++)
    {
    //  Add it to the child div
    $("#sub").append(items[i]);

    // Variable for the difference in height between the parent and child divs
    var diff=subheight()-baseheight;

    //  If this piece of content causes overflow...
    if(diff>0)
        {

        // Remove it...
        var tooMuch="#C"+i;$(tooMuch).remove();

        // And put it in the overflow div instead
        $("#overflow").append(items[i]);
        }
    }

});
关注者
0
被浏览
80
1 个回答
  • 面试哥
    面试哥 2021-02-02
    为面试而生,有面试问题,就找面试哥。

    这只是一种JS。

    您应该在JS中做什么:

    1. 得到的高度 cont1
    2. 将内容加载到时cont1,获取<p>高度
    3. 如果<p>的高度> cont1的高度,则从的文本末尾开始删除文本(并将其存储到临时变量中),<p>直到其高度等于或小于cont1
    4. 删除的文本(之前存储的文本)将被转储到第二个文本中cont2。将文字换行,<p>以便如果您打算再次执行此任务,则有两个容器可以再次处理。

    不是最精美的代码(当内容很长时循环会滞后),但是值得一试

    HTML:

    <div id="cont1">
        <p>long text here</p>
    </div>
    <div id="cont2">
        <p><!-- future content --></p>
    </div>
    

    CSS:

    #cont1{
        height:100px;
        background:red;
        margin-bottom:10px;
        padding:10px;
    }
    #cont2{
        height:100px;
        background:blue;
        margin-bottom:10px;
        padding:10px;
    }
    

    JS:

    //existing text must be rendered in the first container so we know how high it is compared to the div
    
    //get references to avoid overhead in jQuery
    var cont1 = $('#cont1');
    var cont1Height = cont1.height();
    
    var p1 = $('#cont1 p');
    var p1Height = p1.height();
    
    var p2 = $('#cont2 p');
    
    //get text and explode it as an array
    var p1text = p1.text();
    p1text = p1text.split('');
    
    //prepare p2 text
    p2text = [];
    
    //if greater height
    while (p1Height > cont1Height) {
    
        //remove last character
        lastChar = p1text.pop();
    
        //prepend to p2 text
        p2text.unshift(lastChar);
    
        //reassemble p1 text
        p1temp = p1text.join('');
    
        //place back to p1
        p1.text(p1temp);
    
        //re-evaluate height
        p1Height = p1.height();
    
        //loop
    }
    
    //if less than, assemble p2 text and render to p2 container
    p2.text(p2text.join(''));​
    


知识点
面圈网VIP题库

面圈网VIP题库全新上线,海量真题题库资源。 90大类考试,超10万份考试真题开放下载啦

去下载看看