Вопрос по jquery, css, html – Перенос переполнения из одного деления в другое

13

Ситуация: у меня есть два элемента 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]);
        }
    }

});
Можете ли вы показать пример? Код? Картинка? Я не могу представить твою концепцию. elclanrs
Представьте, что это div:|text|, Вы хотите что-то вроде|long content| <other stuff> |overflow of long content|? Tikhon Jelvis
Конечно :: Я приведу пример в моем оригинальном сообщении :: John Ruiz
@JohnRuiz Ищете что-то вроде того же решения. Вы нашли правильное решение с лучшей производительностью? Gitesh Purbia
@GiteshPurbia извините, что нашел время ответить. Этому вопросу на самом деле более 5 лет, поэтому я бы предположил, что любое решение, которое я приобрел, может быть заменено чем-то более современным? John Ruiz

Ваш Ответ

6   ответов
1

Модуль многоколоночного макета, Caniuse.com показывает, что этоне поддерживается по всему борту хотя.

ВотСтатья Quirksmode.com показывая, как это используется.

8

что вы должны сделать в JS:

получить высотуcont1когда контент загружается вcont1, получить<p> высотаесли<p>высота>cont1высота, удалить текст (и сохранить его во временную переменную), начиная с конца текста в<p>пока его высота не станет равной или меньшейcont1.удаленный текст (который был сохранен ранее) будет сброшен во второйcont2, обернуть текст в<p> так что если вы планируете совершить этот подвиг снова, у вас будет 2 контейнера для работы снова.

не самый элегантный код (цикл будет отставать, когда содержимое очень длинное), ностоит попробовать

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(''));​
ОК, спасибо, собираюсь проверить :: John Ruiz
Согласен, без JS для этого нет пути, так как вы в корне меняете разметку контента. Hawken
Вот подтверждение концепции кода:jsfiddle.net/P7Dfz/4 (может отставать из-за петли) Joseph
6

http://jsfiddle.net/D6L7u/

По сути, он копирует содержимое первого элемента 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 так, чтобы он был немного более динамичным, например, получая текущую высоту div # one, а не статическое значение.

Я сделал небольшую модификацию, чтобы сделать ее немного более автоматическойjsfiddle.net/D6L7u/1 user1040899
0

противном случае это трудная задача). Затем вы можете решить, что вы хотите сделать с переполненным контентом.

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

и прокрутите второй div до высоты div.

Там будет две копии текста, но иллюзия будет заключаться в том, что вы завернули содержимое.

Вот рабочий пример:http://jsfiddle.net/natedavisolds/bxzCK/16/

0

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

Похожие вопросы