Вопрос о браузере Независимый текст с несколькими столбцами. (Работает в IE8 IE9) - PullRequest
Новая
       12

Вопрос о браузере Независимый текст с несколькими столбцами. (Работает в IE8 IE9)

1 голос
/ 18 февраля 2011

Некоторое время назад возник вопрос о том, что многостолбцовые CSS3 не поддерживаются ни в IE9, ни в любом другом IE. Это дало следующий быстрый простой и очень функциональный ответ. Я хочу почистить это и улучшить его, поскольку есть недостаток в том, что суть неоправданна. Вы видите, чего не хватает, чтобы сделать нижнюю строку текста оправданной? На самом деле, самой крутой вещью было бы иметь смысл, когда МЕНЬШЕ, чем половина предложения в каждой строке, за которой следует точка, не оправдывать эту строку. Так что следующий абзац более заметен. Что вы думаете об этом? Или, может быть, у вас есть идеи по улучшению этого независимого от браузера многоколоночного скрипта?

URL-адрес результатов теста в реальном времени 

var text=document.getElementById('text').innerHTML;
var words=text.split(" ");
var wordc=words.length;
var length=words.join("").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>";

Ответы [ 2 ]

3 голосов
/ 21 февраля 2011

Большая часть реализации, которую я вижу, использует div + p, проверьте деревья.больше свойств для колонного макета.

2 голосов
/ 09 ноября 2012

Вот мое полностью рабочее решение для нескольких браузеров.

Сначала загрузите эту библиотеку js: http://randysimons.nl/overige/multicolumn/multicolumn.js (многоцветный текстовый рефлоуер v1.4 от Randy Simons)

Затем используйте код, как в этом примере: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>MultiColumn example</title>
        <style type="text/css">
            /*Initial definitions for base column.
               Define the (minimum) width here, and optionally a padding */
            .columnized div {
                float: left;
                padding: 10px;          /* You may use a padding... but thanks to IE you can only use pixels! */
                position: relative;     /* Needed when using a 'read-on'-text */
                text-align: justify;
                text-align-last: justify;
                margin: 0;              /* Don't use a margin! */
                /*width: 0000px;        /* When using a fixed number of columns, you can omit the width. Otherwise it must be set! This will be the *minimum* width of a column*/
            }
            .columnized div P {
                text-align: justify;
                text-align-last: justify;
            }
            .columnized div P:after {
                content: "";
                display: inline-block;
                width: 100%;
            }
        </style>
        <script type="text/javascript" src="MultiColumn.js"></script>
        <script type="text/javascript">
            //Minimalistic settings. You can tweak the settings by re-assigning the defaults in MultiColumnSettings.
            multiColumnSettings=new MultiColumnSettings;
            multiColumnSettings.classNameScreen='columnized';
            multiColumnSettings.numberOfColumns=3;
            window.onload = function () {
                new MultiColumn(document.getElementById("main1"),multiColumnSettings);
            }
        </script>
    </head>
    <body>
        <div id="main1" style="width:550px;font-family:arial">
            <div>
                <P> <!-- P is required! -->
                I managed to do something like this but again, not in CSS, I used PHP to count words and split the text. Unfortunately counting words is a pretty bad way of going about doing it, since some words are longer than others and the columns don't match up. My design was inspired by the IHT website. It's not very hard to implement in PHP. I managed to do something like this but again, not in CSS, I used PHP to count words and split the text. Unfortunately counting words is a pretty bad way of going about doing it, since some words are longer than others and the columns don't match up. My design was inspired by the IHT website. It's not very hard to implement in PHP. I managed to do something like this but again, not in CSS, I used PHP to count words and split the text. Unfortunately counting words is a pretty bad way of going about doing it, since some words are longer than others and the columns don't match up. My design was inspired by the IHT website. It's not very hard to implement in PHP. My design was inspired by the IHT website. It's not very hard to implement in PHP. I managed to do something like this but again, not in CSS, I used PHP to count words and split the text. Unfortunately counting words is a pretty bad way of going about doing it, since some words are longer than others and the columns don't match up. My design was inspired by the IHT website. I used PHP to count words and split the text. Unfortunately counting words is a pretty bad way of going about doing it, since some words are longer than others and the columns don't match up. My design was inspired by the IHT website. It's not very hard to implement in PHP. My design was inspired by the IHT website. It's not very hard to implement in PHP. I managed to do something like this but again, not in CSS, I used PHP to count words and split the text. Unfortunately counting words is a pretty bad way of going about doing it, since some words are longer than others and the columns don't match up. My design was inspired by the IHT website.
                <BR>
            </div>
        </div>
    </body>
</html>

Надеюсь, это поможет!: -)

...