Question

我需要你的帮助。我的内容包含在div中。这必须有300px的高度，但是内容比高度要长，所以我需要内容在下一个div中以相同的300px高度继续。

这需要像打印模块一样分成这些div，以便单独打印。我会感激任何帮助！

我需要的是这样的事情：

<!--Turn this: -->

    <div class="content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

    /******Ut wisi enim ad minim veniam, quis nostrud exerci tation****/ 
    </div>

    <div class="content"></div>



   <!--Into this: -->
    <div class="content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

    (supose this text fills the div)

    </div>

    <div class="content">
    (and the content continues here)
    /******Ut wisi enim ad minim veniam, quis nostrud exerci tation****/ </div>

Answer 1

创建一个P标签并在此标签内添加内容（标签的高度和div的高度如果超出内容则会有所不同。
获取第一个div（固定高度）和First P标签在第一个DIV内的高度（基于内容的高度）
而
的高度小于p的高度（DIV的高度小于P的高度，平均值超过内容。） 3.1从P标签中弹出一些内容（First DIV中的第一个P）并添加到变量var_exceed_content。
将所有var_exceed_content变量值移至第二个div（继续DIV）。：）

<强> HTML：

<div class="content" style='  height:20px;
    background:blue;
    margin-bottom:10px;'>
    <p>    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

    /******Ut wisi enim ad minim veniam, quis nostrud exerci tation****/.</p>
</div>
<div class="content_continues" style='    
    background: green;
    margin-bottom:10px;
    padding:10px;'>
    <p></p>
</div>

JavaScript代码：

var cont1 = $('.content');
var cont1Height = cont1.height();

var p1 = $('.content p');
var p1Height = p1.height();


var p2 = $('.content_continues 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(''));

请检查此DEMO

Answer 2

你可以写一些javascript来获取溢出并将其附加到下一个内容div。

if (contentdiv.length > x ) {
    nextdiv.innerHTML = contentdiv.innerHTML.substring(x);
}

是的......那很脏。我认为这就是你如何使用子串;有一阵子了。你必须想出一个获得'x'值的好方法。

如果填写，请在另一个div中继续div的内容

2 个答案: