Ответ 1

это только JS.

что вы должны делать в JS:

• получить высоту cont1
• когда содержимое загружено в cont1, получите высоту <p> height
• if <p> height > cont1 height, удалите текст (и сохраните его во временную переменную), начиная с конца текста в <p>, пока высота не станет равной или меньше cont1.
• удаленный текст (который был сохранен ранее) будет сброшен во второй cont2. оберните текст в <p>, чтобы, если вы планируете снова совершить этот подвиг, у вас есть 2 контейнера, чтобы иметь дело снова.

не самый изящный код (цикл будет отставать, когда контент очень длинный), но стоит попробовать

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

Ответ 2

Немного взломан, но это должно сработать. http://jsfiddle.net/D6L7u/

В основном он копирует содержимое первого 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, а не статическое значение.      

Ответ 3

CSS3 поддерживает этот тип столбчатого потока через его модуль многоколоночного макета. Caniuse.com показывает, что он не поддерживается на борту.

Здесь статья Quirksmode.com, показывающая, как она используется.

Ответ 4

Так как высоты фиксированы. Скопируйте html из первого div во второй и прокрутите второй div вверх по высоте divs.

Будут две копии текста, но иллюзия будет иметь завернутый контент.

Вот рабочий пример: http://jsfiddle.net/natedavisolds/bxzCK/16/

Ответ 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 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.
    }
});​

Ответ 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;
}