情况：我有两个固定高度的div，溢出设置为隐藏在两者上，以及第一个div中的动态文本内容。如果该内容超过第一个div的溢出边界，我希望它能自动溢出到第二个div中。
我的问题只是如何做到这一点？我研究过，最接近我发现的是一个JQuery插件，可以自动为类似报纸的布局创建列。虽然这不是我所需要的，但它确实让我希望这可以在更简单的层面上实现。
视觉示例：
<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>
感谢大家！根据所有输入，我把它放在一起。注意：这可能不适合每个人的目的：
话虽如此：
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>
JQ
$(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]);
}
}
});
这只是一种JS。
你应该在JS做什么：
cont1的高度cont1时，获取<p>高度<p>的高度> cont1的高度，则从文本in<p>的末尾开始删除文本（并将其存储到临时变量），直到它的高度等于或小于cont1。cont2中。将文本包装在<p>中，这样如果你打算再次执行此专长，你就有2个容器可以再次处理。不是最优雅的代码（当内容很长时循环会滞后），但是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(''));
它有点hacky，但这应该工作。 http://jsfiddle.net/D6L7u/
基本上它将第一个div的内容复制到第二个div然后将其偏移，因此初始文本不会显示两次。
<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>
.mydiv
{
float: left;
width: 200px;
height: 200px;
border: 1px solid black;
overflow: hidden;
}
$(function() {
var copy = $("#one").clone().attr("id", "onecopy").css({
"margin-top": "-200px",
"height":"400px"
});
$("#two").append(copy);
});
您可能希望将js修改为更加动态，例如获取div＃1的当前高度而不是静态值。
CSS3通过其Multi-column Layout Module支持这种柱状流。 Caniuse.com显示它isn't supported around the board虽然。
这是一个Quirksmode.com article显示它是如何使用的。
像这样的框架允许您检测内容何时溢出（否则是一项艰巨的任务）。然后，您可以决定要对溢出的内容执行什么操作。
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.
}
});
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;
}
由于高度是固定的。将html从第一个div复制到第二个div并将第二个div向上滚动div的高度。
将有两份文本副本，但幻想将包含内容。