从一个div转移溢出到另一个 [英] Transfer overflow from one div to another
本文介绍了从一个div转移溢出到另一个的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
情况：我有两个固定高度的div，溢出设置为隐藏在两者上，和第一个div中的动态文本内容。如果该内容超过第一个div的溢出边界，我想要它自动溢出到第二个div。
我的问题是怎么做的？我研究了，我发现的最接近的事情是一个JQuery插件，自动创建一个报纸类布局的列。虽然这不完全是我需要的，但它确实让我希望这是可以在更简单的水平上实现。
视觉效果：
< html>
< head>
< style type =text / css>
div {height：1in; width：4in; overflow：hidden}
< / style>
< / head>
< body>
< div id =d1> ...（足以导致溢出超过1in高度的文字）...< / div>
< div id =d2> ...（从第一个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 / javascriptsrc =ref / js / jquery-1.6.2.min.js>< / script>
< script type =text / javascriptsrc =work.js>< / script>
< / head>
< body>
< div id =base>
< div id =sub>< / div>
< / div>
< br />
< div id =overflow>
< / div>
$（document）.ready（function（）{
//但是你希望
var items = new Array（）;
items [0] ='< div class =contentid =C0style =border：1px blue solid; height：。 75in> content 1< / div>';
items [1] ='< div class =contentid =C1style =border：1px green solid; height：.75in> ; content 2< / div>';
items [2] ='< div class =contentid =C2style =border：1px red solid; height：.75in> content 3< ; / div>';
items [3] ='< div class =contentid =C3style =border：1px yellow solid; height：.75in> content 4< / div ;';
items [4] ='< div class =contentid =C4style =border：1px orange solid; height：.75in> content 5< / div>
//具有固定宽度的父div的高度变量
var baseheight = $（＃base）css（'height'）。substring（0，$ #base）css（'height'）。length-2）;
//在固定宽度div内动态获取子div的高度的函数
function subheight ）{return $（＃sub）。css（'height'）。substring（0，$（＃sub）。css（'height'）。length-2）;}
$ b b //对于每个单独的内容...
for（i = 0; i
//将其添加到子div中
$（＃sub）。append（items [i]）;
//父和子div之间的高度差异的变量
var diff = subheight（） - baseheight;
//如果这段内容导致溢出...
if（diff> 0）
{
//删除...
var tooMuch =＃C+ i; $（tooMuch）.remove（）;
//将它放在overflow div中，而不是
$（＃overflow）。append（items [i]）;
}
}
}）;
解决方案
您在JS中应该做什么：
- 获得< c $ c> cont1
- 当内容加载到
cont1>< p> 高 - 如果
< p>c> c1> c> c1> 的高度，从< p> ，直到它的高度等于或小于cont1。 - 删除的文本第二个
cont2。将< p>中的文本换行，以便如果您计划再次执行此专长，则有2个容器可以再次处理。
不是最优雅的代码（当内容非常长时，循环会延迟），但值得一试
HTML：
code>< div id =cont1>
< p>长文字在这里< / p>
< / div>
< div id =cont2>
< p><！ - 未来内容 - >< / p>
< / div>
CSS：
code>＃cont1 {
height：100px;
background：red;
margin-bottom：10px;
padding：10px;
}
＃cont2 {
height：100px;
background：blue;
margin-bottom：10px;
padding：10px;
}
JS：
//现有文本必须在第一个容器中渲染，所以我们知道它与div
//获取引用以避免jQuery中的开销
var cont1 = $（'＃cont1'）;
var cont1Height = cont1.height（）;
var p1 = $（'＃cont1 p'）;
var p1Height = p1.height（）;
var p2 = $（'＃cont2 p'）;
//获取文本并将其作为数组展开
var p1text = p1.text（）;
p1text = p1text.split（''）;
//准备p2文本
p2text = [];
//如果更大的高度
while（p1Height> cont1Height）{
//删除最后一个字符
lastChar = p1text.pop
//添加到p2文本
p2text.unshift（lastChar）;
//重新组合p1文本
p1temp = p1text.join（''）;
//放回p1
p1.text（p1temp）;
//重新评估高度
p1Height = p1.height（）;
// loop
}
//如果小于，汇编p2文本并渲染到p2容器
p2.text（p2text.join ''））;
Situation: I have two fixed-height divs, overflow set to hidden on both, and dynamic text content within the first div. Should that content exceed the overflow boundaries of the first div, I would like for it to automatically spill into the second div.
My questions is simply how to do this? I've researched, and the closest thing I found was a JQuery plugin that automatically creates columns for a newspaper-like layout. While this is not exactly what I need, it does give me hope that this is achievable on a simpler level.
Visual Example:
<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>
Thanks everyone! Based on all the input, I put this together. NOTE: this may not suit everyone's purpose:
- I did it in JQuery
- This is very conceptual
- Each additional item it its own element, and not just open text
- I already know for my needs that a single div will not break the overflow limits
That being said:
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]);
}
}
});
解决方案
this is sort of JS only.
what you should do in JS:
- get the height of
cont1 - when content is loaded to
cont1, get the<p>height - if
<p>'s height >cont1's height, remove text (and store it to a temporary variable) starting from the end of of the text in<p>'s until it's height is equal or lesser thancont1. - the removed text (which was stored earlier) will be dumped into the second
cont2. wrap the text in<p>so that if you plan to do this feat again, you have 2 containers to deal with again.
not the most elegant of code (loop will lag when content is very long), but 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(''));
这篇关于从一个div转移溢出到另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
