情况：我有两个高度固定的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>
谢谢大家！根据所有的意见，我整理了以下内容。注意：这可能并不适合每个人的目的：
- 我用jQuery实现了它
- 这是非常概念性的
- 每个额外的项目都是自己的元素，而不仅仅是开放文本
- 针对我的需求，我已经知道单个 div 不会超出溢出限制
话虽如此：
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>
jQuery
$(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]);
}
}
});
|文本|。你想要像这样的东西吗：|长内容| <其他东西> |长内容溢出|？ - Tikhon Jelvis