Situación: Tengo dos divs de altura fija, el desbordamiento está oculto en ambos y el contenido de texto dinámico en el primer div. Si ese contenido excede los límites de desbordamiento del primer div, me gustaría que se derrame automáticamente en el segundo div.Desbordamiento de transferencia de un div a otro

Mi pregunta es simplemente ¿cómo hacer esto? Investigué y lo más parecido que encontré fue un plugin de JQuery que crea automáticamente columnas para un diseño similar a un periódico. Si bien esto no es exactamente lo que necesito, me da esperanza de que esto se pueda lograr en un nivel más simple.

Visual Ejemplo:

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

Gracias a todos! En base a toda la información, lo junté. propósito que esto puede no ser apropiado de todos:: NOTA

lo hice en jQuery
Esto es muy conceptual
Cada artículo adicional que su propio elemento, y el texto no sólo abierta
que ya sé para mis necesidades que una sola div no se desintegrará los límites de desbordamiento

dicho esto:

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>

$(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]); 
     } 
    } 

});

Fuente

2012-02-16 John Ruiz

¿Puede sho w un ejemplo? ¿Código? ¿Una imagen? No puedo imaginar tu concepto. – elclanrs

Sure :: Voy a poner el ejemplo en mi publicación original :: –

esto es una especie de JS única.

lo que debe hacer en JS:

obtener la altura de cont1
cuando el contenido se carga a cont1, obtener la altura <p>
si 'altura s>cont1' <p> s altura, eliminar texto (y almacenarlo en una variable temporal) comenzando desde el final del texto en <p> hasta que su altura sea igual o menor que cont1.
el texto eliminado (que se almacenó anteriormente) se volcará en el segundo cont2. Envuelva el texto en <p> para que si planea hacer esta hazaña nuevamente, tenga 2 contenedores para tratar nuevamente.

el más elegante de código (bucle de retraso cuando el contenido es muy larga), pero 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(''));

Fuente

2012-02-16 03:47:54 Joseph

Estoy de acuerdo, no hay forma sin JS para este, ya que fundamentalmente está cambiando el marcado de contenido. – Hawken

Bien, gracias, voy a probar :: –

aquí hay un código de prueba de concepto: http://jsfiddle.net/P7Dfz/4/ (puede retrasarse debido al ciclo) – Joseph

Dado que las alturas son estables. Copie el html del primer div en el segundo y deslice el segundo div hasta la altura de los divs.

Habrá dos copias del texto pero la ilusión será de tener contenido envuelto.

Aquí es un ejemplo de trabajo: http://jsfiddle.net/natedavisolds/bxzCK/16/

Fuente

2012-02-16 03:52:55 natedavisolds

Es un poco hacky, pero esto debería funcionar. http://jsfiddle.net/D6L7u/

Básicamente copia el contenido del primer div en el segundo y luego lo desplaza para que el texto inicial no se muestre dos veces.

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

Es posible que desee modificar el js a ser un poco más dinámica, tales como conseguir la altura actual del div # uno en lugar de un valor estático.

Fuente

2012-02-16 03:53:04 SynXsiS

Hice una pequeña modificación para que sea un poco más automático http://jsfiddle.net/D6L7u/1/ – user1040899

CSS3 admite este tipo de flujo columnar a través de su Multi-column Layout Module. Caniuse.com muestra que es isn't supported around the board sin embargo.

Aquí hay un Quirksmode.com article que muestra cómo se usa.

Fuente

2012-02-16 03:55:29 Twisol

Un marco como este le permite detectar cuando el contenido se desborda (de lo contrario es una tarea difícil). A continuación, puede decidir qué desea hacer con el contenido desbordado.

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

Fuente

2012-02-16 03:56:11 mrtsherman

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

Fuente

2012-02-16 04:02:22

Desbordamiento de transferencia de un div a otro

Respuesta

HTML

CSS

JS

Cuestiones relacionadas