HTML

Question

情况：我有两个固定高度的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>

谢谢大家！根据所有输入，我把它放在一起。注意：这可能不适合每个人的目的：

我在JQuery中做到了
这是非常概念性的
每个附加项目都是它自己的元素，而不仅仅是打开文本
我已经知道我的需要，单个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]);
        }
    }

});

Answer 1

这只是一种JS。

你应该在JS中做些什么：

获得cont1
将内容加载到cont1时，获取<p>高度
如果<p>的身高＆gt; cont1的高度，从<p>的文本末尾开始删除文本（并将其存储到临时变量），直到它的高度等于或小于cont1。
删除的文本（先前存储过的文件）将被转储到第二个cont2中。将文本包装在<p>中，这样如果您打算再次执行此专长，则需要再处理2个容器。

不是最优雅的代码（当内容很长时循环会滞后），但是it's worth a try

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

Answer 2

这有点hacky，但这应该工作。 http://jsfiddle.net/D6L7u/

基本上它会将第一个div的内容复制到第二个div中，然后将其偏移，以便初始文本不会显示两次。

HTML

<div id="one" class="mydiv">
Tail beef tenderloin chicken. Ground round tenderloin t-bone biltong fatback andouille bacon, ribeye leberkase boudin ham hock capicola salami frankfurter chicken. Boudin meatball pig strip steak, tongue sirloin brisket bacon capicola beef t-bone hamburger shankle beef ribs frankfurter. Capicola bresaola brisket chuck, short ribs ham jerky. Hamburger venison turkey short ribs jerky, bresaola chuck filet mignon spare ribs. Drumstick kielbasa sirloin jowl flank shoulder, salami tail short ribs corned beef chicken jerky tri-tip bresaola.
</div>

<div id="two" class="mydiv">

</div>

CSS

.mydiv
{
    float: left;
    width: 200px;
    height: 200px;
    border: 1px solid black;
    overflow: hidden;
}

JS

$(function() {
    var copy = $("#one").clone().attr("id", "onecopy").css({
        "margin-top": "-200px",
        "height":"400px"
    });
    $("#two").append(copy);
});

您可能希望将js修改为更加动态，例如获取div＃1的当前高度而不是静态值。

Answer 3

CSS3通过其Multi-column Layout Module支持这种柱状流。但Caniuse.com显示它isn't supported around the board。

这是Quirksmode.com article，显示了它是如何使用的。

Answer 4

由于高度是固定的。将html从第一个div复制到第二个div中，然后将第二个div向上滚动div的高度。

将会有两份文本副本，但幻想将包含内容。

以下是一个工作示例：http://jsfiddle.net/natedavisolds/bxzCK/16/

Answer 5

这样的框架允许您检测内容何时溢出（否则是一项艰巨的任务）。然后，您可以决定要对溢出的内容执行什么操作。

http://jsfiddle.net/mrtsherman/R7cZL/

<div  id="a" contenteditable>Start typing here...</div>
<div  id="b"></div>
<div  id="c">You should position me way off the screen</div>
<div  id="d">I'm a mirror of div C</div>

div {         
    border: 1px solid gray; 
    margin: 5px; 
    height: 75px; 
    width: 100px; 
    overflow: hidden; 
    display: inline-block;
}
div#c { visibility: hidden; position: absolute; left: -9999px; }

$('#a').bind('input propertychange', function() {
    //copy current content into hidden div c
    $('#c').html($(this).html());
    //now we know height of content if it we didn't have overflow on
    var cHeight = $('#c').height();
    //compare to current height, if greater than then we have overflowed
    if (cHeight > $(this).height()) {
        //move new content in div B
        //there are lots of ways to do this and it depends on what
        //people's input is. Can they cut/paste in?
        //Maybe we start at the end of the string, working backwards until
        //we find that content now fits.
    }
});

Answer 6

HTML

<div id="block1" style=">
  <p>
    long text...
  </p>  
</div>

<div id="block2">

</div>

Jquery的

var $1stblock = $('#block1');
var $2ndblock = $('#block2');
var $1stpar = $('#block1 p');
var diff = $1stpar.height() - $1stblock.height();
$1stpar.clone().appendTo($block2).css('top', diff);

CSS

div {
  position: relative;
  overflow: hidden;
}

div p {
  position: absolute;
}

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

6 个答案:

HTML

CSS

JS