从一个div到另一个div的传输溢出
从一个div到另一个div的传输溢出
提问于 2012-02-16 03:36:47
情境:我有两个固定高度的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>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]);
}
}
});Stack Overflow用户
发布于 2012-02-16 03:56:11
这样的框架允许您检测内容溢出的时间(否则是一项艰巨的任务)。然后，您可以决定您想要对超越式内容做什么。
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.
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9305198
复制相关文章
相似问题
腾讯云开发者
