情况：我有两个固定高度的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>

$(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]); 
     } 
    } 

});

来源

2012-02-16 John Ruiz

你能笑举个例子？码？一个图像？我无法想象你的概念。 – elclanrs 2012-02-16 03:40:50

当然::我会把例子放在我原来的帖子中:: – 2012-02-16 03:52:02

这是那种只有JS的。

你应该在JS做什么：

得到cont1
高度时内容加载到cont1，得到<p>高度
如果<p>的高度>cont1的高度，从<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(''));

来源

2012-02-16 03:47:54 Joseph

同意，没有JS没有办法解决这个问题，因为你从根本上改变了内容标记。 – Hawken 2012-02-16 03:52:55

好的，谢谢，要去测试:: – 2012-02-16 03:53:46

这里是一个概念验证码：http://jsfiddle.net/P7Dfz/4/（可能会因为循环而滞后） – Joseph 2012-02-16 04:19:44

由于高度是固定的。将第一个div的html复制到第二个div中，并将第二个div滚动到div的高度。

将会有两个文本的副本，但幻想将包装内容。

这里是一个工作示例：http://jsfiddle.net/natedavisolds/bxzCK/16/

来源

2012-02-16 03:52:55 natedavisolds

这是稍微哈克，但这应该工作。 http://jsfiddle.net/D6L7u/

基本上它会将第一个div的内容复制到第二个div中，然后对它进行偏移，以便初始文本不会显示两次。

HTML

<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>

CSS

.mydiv 
{ 
    float: left; 
    width: 200px; 
    height: 200px; 
    border: 1px solid black; 
    overflow: hidden; 
}

JS

$(function() { 
    var copy = $("#one").clone().attr("id", "onecopy").css({ 
     "margin-top": "-200px", 
     "height":"400px" 
    }); 
    $("#two").append(copy); 
});

您可能要修改的JS是一个小更动态，如收到的股利＃当前高度一个而不是静态值。

来源

2012-02-16 03:53:04 SynXsiS

我做了一些微小的修改，使它更自动一些http://jsfiddle.net/D6L7u/1/ – user1040899 2012-02-16 04:11:28

CSS3支持这种柱状流通过其Multi-column Layout Module。 Caniuse.com显示它不过isn't supported around the board。

这是Quirksmode.com article显示它如何使用。

来源

2012-02-16 03:55:29 Twisol

这样的框架可以让你检测内容何时溢出（否则就是一个困难的任务）。然后，您可以决定您想要处理的内容。

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. 
    } 
});

来源

2012-02-16 03:56:11 mrtsherman

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; 
}

来源

2012-02-16 04:02:22

将溢出从一个div转移到另一个

回答

HTML

CSS

JS

相关问题