Transfer overflow from one div to another

Question

Situation: I have two fixed-height divs, overflow set to hidden on both, and dynamic text content within the first div. Should that content exceed the overflow boundaries of

Answer 1

CSS3 supports this kind of columnar flow via its Multi-column Layout Module. Caniuse.com shows that it isn't supported around the board though.

Here's a Quirksmode.com article showing how it's used.

Answer 2

A framework like this allows you to detect when content overflows (otherwise a hard task). You can then decide what you want to do with the overflown content.

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 3

this is sort of JS only.

what you should do in JS:

1. get the height of cont1
2. when content is loaded to cont1, get the <p> height
3. if <p>'s height > cont1's height, remove text (and store it to a temporary variable) starting from the end of of the text in<p>'s until it's height is equal or lesser than cont1.
4. the removed text (which was stored earlier) will be dumped into the second cont2. wrap the text in <p> so that if you plan to do this feat again, you have 2 containers to deal with again.

not the most elegant of code (loop will lag when content is very long), but 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 4

Since the heights are fixed. Copy the html from first div into the second and scroll the second div up the height of the divs.

There will be two copies of the text but the illusion will be of having wrapped content.

Here is a working example: http://jsfiddle.net/natedavisolds/bxzCK/16/

Answer 5

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;
}

Answer 6

It's slightly hacky, but this should work. http://jsfiddle.net/D6L7u/

Basically it copies the content of the first div into the second and then offsets it so the initial text is not shown twice.

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);
});

You may wish to modify the js to be a little more dynamic such as getting the current height of div#one rather than a static value. ​