1

我需要你的帮助。我的内容包含在一个 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>
4

2 回答 2

0

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

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

是的……那很​​脏。我认为这就是您使用子字符串 meth 的方式；有一阵子了。不过，您必须想出一个获得“x”值的好方法。

于 2013-06-29T05:33:03.140 回答
0
  1. 创建一个P标签，并在这个标签里面添加内容（标签的高度和div的高度如果超过内容就会不同。
  2. 获取第一个 div 的高度（固定高度）和第一个 DIV 内的 First P 标签的高度（基于内容的高度）
  3. 而高度

    小于 p 的高度。（DIV 的高度小于 P 的高度，Means 超出内容。） 3.1 从 P 标签中弹出一些内容（First DIV 中的第一个 P）并添加到变量 var_exceed_content。

  4. 将所有 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(''));

请查看此演示

于 2013-06-29T05:26:12.390 回答