这只是一种JS。
您应该在JS中做什么：
- 得到的高度
cont1
- 将内容加载到时
cont1
，获取<p>
高度 - 如果
<p>
的高度>cont1
的高度，则从的文本末尾开始删除文本（并将其存储到临时变量中），<p>
直到其高度等于或小于cont1
。 - 删除的文本（之前存储的文本）将被转储到第二个文本中
cont2
。将文字换行，<p>
以便如果您打算再次执行此任务，则有两个容器可以再次处理。
不是最精美的代码（当内容很长时循环会滞后），但是值得一试
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 jQueryvar 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 arrayvar p1text = p1.text();p1text = p1text.split('');//prepare p2 textp2text = [];//if greater heightwhile (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 containerp2.text(p2text.join(''));
