情況：我有兩個固定高度的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

相關問題