Продолжая переполненный текст в другом div?

Question

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

Я хочу, чтобы «размер бумаги» (размер div) был фиксирован, а текст продолжался навторой лист бумаги (второй элемент div) отображается чуть ниже первого листа, как это ..

Я извиняюсь, будучи новым пользователем, я не могу публиковать созданные мной скриншотычтобы помочь объяснить мою ситуацию, поэтому я вынужден связываться, пока у меня не наберется достаточно очков репутации:

http://img16.imageshack.us/img16/5538/pagesuc.jpg

ТОЛЬКО ДЛЯ СЛУЧАЯПРОСТОТА: Я создал простую страницу html / css, чтобы в простейшей форме продемонстрировать, чего я пытаюсь достичь с помощью кода:

<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: 0;
}
.container {
    background: #FFFFFF;
    width: 600px;
    height: 400px;
    margin: 0 auto;
}
#lbox {
    background: #F00;
    width: 300px;
    height: 400px;
    float: left;
}
#rbox {
    background: #00F;
    width: 300px;
    height: 400px;
    float: right;
}
.flowcontent {
    padding: 10px 50px;
}
</style>

<div class="container">
  <div id="lbox">
    <div class="flowcontent">
      <p>Lorem Ipsum...</p>
    </div>
  </div>
  <div id="rbox">
    <div class="flowcontent"> </div>
  </div>
</div>

Снимок экрана:

Я извиняюсь, будучи новым пользователем, мне не разрешено публиковать созданные мной скриншоты, чтобы помочь объяснить мою ситуацию, поэтому я вынужден давать ссылки, пока у меня не будет достаточно очков репутации:

http://img689.imageshack.us/img689/7853/overflowc.jpg

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

Я понимаю, что это может быть невозможно только с помощью HTML / CSS, но я надеялся, что у CSS3 могут быть какие-то новые приемы для этого, так как он имеетболее продвинутая обработка столбцов. Если это бесполезно, есть ли у кого-нибудь предложение для логического способа разобраться с этим с помощью PHP или даже JavaScript или JQuery?

Я знаю PHP, но я все еще новичок в JS / JQ, поэтому я предоставил (надеюсь) очень простой пример кода, чтобы каждый мог подключить свои собственные примеры JS / PHP.

В любом случае,спасибо за ваше время.

Answer 1

Я придумал небольшой JS-скрипт, который мог бы вам помочь.Это далеко от совершенства, но может дать вам достойную отправную точку.По сути, он просматривает ваш большой текст и ищет полосу прокрутки, чтобы появиться.Возможно, вам придется немного изменить вычисления.

JSFiddle http://jsfiddle.net/Tt9sw/2/

JS

var currentCol = $('.col:first');
var text = currentCol.text();
currentCol.text('');
var wordArray=text.split(' ');

$.fn.hasOverflow = function() {
   var div= document.getElementById($(this).attr('id')); 
   return div.scrollHeight>div.clientHeight;
};

for(var x=0; x<wordArray.length; x++){
    var word= wordArray[x];
    currentCol.append(word+' ');
    if (currentCol.hasOverflow()){
        currentCol = currentCol.next('.col');
    }
}

HTML

<div class="col" id="col1">Lorem Ipsum ....... LONG TEXT .......</div>
<div class="col" id="col2"></div>
<div class="col" id="col3"></div>
<div class="col" id="col4"></div>
<div class="col" id="col5"></div>

CSS

.col{
   width:200px;
   float:left;
   height:200px;
   border:1px solid #999;
   overflow:auto;
   font-family:tahoma;
   font-size:9pt;
}

ОБНОВЛЕНИЕ

Для этого примера необходимовключите jQuery Libray в свои скрипты.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"  type="text/javascript"></script>

PS - если вы познакомитесь с jQuery, вы начнете использовать его для всего .Это значительно повышает кросс-браузерную совместимость и упрощает многие общие задачи.

Answer 2

Что вам нужно, так это модуль CSS Regions, предложенный Adobe и в настоящее время поддерживаемый нулевыми браузерами. Adobe действительно выпустила очень грубый браузер на основе webkit для игры со спецификацией, если вы действительно заинтересованы. Но, как говорили другие, сейчас вы SOL и вам нужно найти другое решение.

• http://www.adobe.com/devnet/html5/articles/css3-regions.html
• http://labs.adobe.com/technologies/cssregions/
• http://dev.w3.org/csswg/css3-regions/

Answer 3

CSS3 имеет Модуль макета с несколькими столбцами . Однако я сомневаюсь, что это широко поддерживается на данный момент.

Протестируйте его в целевых браузерах: http://www.quirksmode.org/css/multicolumn.html

Answer 4

Shapes by Adobe делает именно это, однако имеет очень ограниченную поддержку браузера.

IE: 11 +

Chrome: 37 +

FireFox: 32 +

Answer 5

Если вы знаете, сколько символов содержит одна из ваших страниц, вы можете динамически разделить строку, используя javascript или php, а затем распечатать первую часть массива на первом «бумажном листе», а вторую - на втором.

Вы не сможете сделать это только с помощью HTML / CSS

Answer 6

Вы не можете сделать это только с HTML и CSS.CSS ориентирован в первую очередь на веб-браузеры, а модель макета - это модель документа на вертикально расширяющейся поверхности.Вы можете сделать авто-высоту ячеек (которая по умолчанию) или фиксированную высоту, но вы не можете изменить способ, которым содержимое принадлежит родительскому ящику (что вам нужно, чтобы это работало).

Несколько вариантов, которые вы могли бы рассмотреть, если это действительно важно для вас:

• Используйте функции постраничного мультимедиа, встроенные в CSS, чтобы обеспечить удобную подкачку при рендеринге на постраничный носитель (например, распечатки);Я говорю о свойствах типа page-break-after, page-break-before и т. Д. Вы не получите страницы в веб-браузере, но, по крайней мере, вы можете контролировать, как он печатается на физической бумаге
• Напишите какой-нибудь невероятно умныйJavaScript, который разделяет ваш контент на страницы.Здесь есть некоторый порочный круг, потому что вы не будете знать, подходит ли ваш контент, пока вы не попробуете, поэтому вам, возможно, придется несколько раз перефразировать методом проб и ошибок.Если ваш контент имеет специальную структуру, которой вы можете воспользоваться, например, в форме стихотворения, где все разрывы строк являются явными, или если вы используете шрифт фиксированной ширины, тогда возможен однопроходный алгоритм, и вы даже сможетечтобы сделать это на стороне сервера, используя PHP, ASP.NET или любую другую технологию сценариев на стороне сервера.
• Используйте другой формат документа, который дает вам контроль над страницами и абсолютное размещение элементов в структуре страницы,например, PDF.(Я бы не рекомендовал использовать PDF для общих веб-документов; с точки зрения пользователя PDF-файлы вообще не удобны).
• Используйте что-то вроде Flash или Silverlight для создания желаемого макета.Этого тоже следует избегать, если нет других причин, по которым вы все равно будете его использовать;Кроме того, алгоритм форматирования страдает от тех же проблем, что и реализация javascript, за исключением того, что вы имеете больший контроль над частью рендеринга (шрифты, кернинг и т. д.).

Для большинства вещей в Интернетеоднако я бы просто отказался от этой идеи и выбрал более реалистичный дизайн.