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

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

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

Я придумал небольшой скрипт 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, вы начнете использовать его для всего . Это значительно увеличивает совместимость между браузерами и упрощает многие общие задачи.

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

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

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

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

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

Однако для большинства вещей в Интернете я просто отпустил идею и пошёл с более реалистичным дизайном.

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

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

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

IE: 11+

Chrome: 37+

FireFox: 32+