Как запрограммировать макет из нескольких текстовых столбцов? Так что текст перетекает в несколько столбцов!

Question

был счастлив, когда нашел вариант css3 / Mozillas для нескольких текстовых столбцов, НО source1 & source2 доказывает, что IE9, самый популярный браузер на январь 2011 года,НЕ будет поддерживать многостолбцовый css3! BUMMER!

В настоящее время Я использую тупой рабочий процесс, а именно делю текст вручную на три элемента, которые плавают влево.Как вы можете себе представить, это боль в заднице, так как мне приходится все время переваривать, пока я не пойму это правильно.Положительное замечание: ручное управление началом и окончанием абзаца!

<div id="CLMN1"><p>Text1</p></div>
<div id="CLMN2"><p>Text2</p></div>
<div id="CLMN3"><p>Text3</p></div>

Вопрос Каковы решения для умного перетекания текста в несколько столбцов, при этом в качестве входных данных используется только один неделимый <p>text1 Text2 Text3</p>?Возможно, вы уже знаете решение, или можете предложить / сделать эскиз, как бы вы поделились здесь со мной?Приветствуется любое вдохновение, даже внешне не по теме изображения макетов газет, так как очевидно, что вся цель этой темы в том, чтобы иметь возможность читать страницы более легко / красиво .

Спасибо!

Answer 1

Однажды у меня возникла та же проблема, и я не знал о поддержке нескольких столбцов в css3.

То, что я сделал, было:

• считая буквы,
• деление строки на три
• перетаскивая задние заглушки, которые я произвел, в следующий столбец

Реализация Javascript:

var text=document.getElementById('text').innerHTML;
var words=text.split(" ");
var wordc=words.length;
var length=text.length;
var cols= new Array("","","");
var colc= new Array(0,0,0);
var col=0;

for(var i=0; i<wordc; i++){
    cols[col]+=words[i]+" ";
    if( (colc[col]+=words[i].length)>length/3)col++;
}


document.getElementById('text').innerHTML="<p>"+cols[0]+"</p><p>"+cols[1]+"</p><p>"+cols[2]+"</p>";

Попробуйте на (теперь обновленной) скрипке!

Но обратите внимание: это очень простая реализация и выглядит не так хорошо. Специально для коротких статей у вас будет проблема разной высоты столбцов, потому что вы не проверяете ширину букв!