将溢出从一个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">...(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]);
}
}
});
-
这只是一种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 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(''));
- 得到的高度
-
从一个枚举状态转移到另一个枚举状态并循环
2021-01-29 关注 0 浏览62 1答案
-
如何在Android中将数据从一个活动转移到另一个活动
2021-01-30 关注 0 浏览117 1答案
-
儿童主动、及时地将注意力从一个对象或一个活动转移到另一个对象或另一个活动中去,这是( )。
2022-05-21 关注 0 浏览14 1答案
-
儿童主动、及时地将注意力从一个对象或一个活动转移到另一个对象或另一个活动中去,这是( )。
2022-05-21 关注 0 浏览14 1答案
-
人根据任务把注意从一个对象转移到另一个对象上、称为
2022-05-21 关注 0 浏览15 1答案
-
有意识地将注意从一个对象转移到另一个对象上的能力,这是指的( )品质。
2022-05-21 关注 0 浏览11 1答案
-
有意识地将注意从一个对象转移到另一个对象上的能力,这是指的( )品质。
2022-05-21 关注 0 浏览13 1答案
-
根据新的任务,主动及时地把注意从一个对象转移到另一个对象上,叫做______。
2022-05-21 关注 0 浏览16 1答案
-
使用条件将行从一个表迁移到另一个表[MYSQL]
2021-06-04 关注 0 浏览101 1答案
-
由于外界原因,正电荷可以由一个物体转移到另一个物体。( )
2022-05-08 关注 0 浏览15 1答案