我可以自動將CSS列分成垂直適合視口的'頁面'嗎？

Question

我有一個頁面，顯示一個長篇文章，以獲得舒適的閱讀。我想在寬屏幕上將文本分成多列，但我不想讓用戶一直滾動到頁面底部，然後在完成每列後重新回到頂部。

有沒有一種方法可以在不使用JavaScript的情況下自動將文章分割爲足夠短的垂直部分（'頁面'），以便完全適合視口？下面是一些ASCII藝術來說明：

+-------------------------------------------------------------+ 
|      === Some Title ===     | 
|                | 
| You think water moves fast? it out. Now we took an oath, | 
| You should see ice. It moves that I'm breaking now. We | 
| like it has a mind. Like it said we'd say it was the  | 
| knows it killed the world  snow that killed the other | 
| once and got a taste for  two, but it wasn't. Nature | 
| murder. After the avalanche, is lethal but it doesn't  | 
| it took us a week to climb  hold a candle to man.  | 
| out. Now, I don't know          | 
| exactly when we turned on  Like you, I used to think | 
| each other, but I know that the world was this great  | 
| seven of us survived the  place where everybody lived | 
| slide... and only five made by the same standards I did, | 
+-------------------------------------------------------------+ 
| then some kid with a nail  Dr. Wu inserted a gene that | 
| showed me I was living in  makes a single faulty enzyme | 
| his world, a world where  in protein metabolism. The | 
| chaos rules not order, a  animals can't manufacture the | 
| world where righteousness is amino acid lysine. Unless  | 
| not rewarded. That's Cesar's they're continually supplied | 
| world, and if you're not  with lysine by us, they'll | 
| willing to play by his rules, slip into a coma and die.  | 
| then you're gonna have to pay        | 
| the price.     Do you see any Teletubbies in | 
| The lysine contingency -  here? Do you see a slender | 
| it's intended to prevent the plastic tag clipped to my  | 
| spread of the animals is case shirt with my name printed on | 
| they ever got off the island. it?       | 
+-------------------------------------------------------------+ 

的線代表視口的高度。列在視口底部結束，文本將流到下一列的頂部，該列從視口頂部開始。一旦讀取了文本的「頁面」，用戶就會向下滾動到下一頁，然後重新開始。這允許將文本拆分成列而不需要大量額外的滾動。在大屏幕上，「頁面」會很高，但在小屏幕上，它們將足夠短以適合視口。

一個好的解決方案不一定要完美的語義，但不應該需要任何JavaScript。

Answer 1

我認爲http://quirksmode.org/css/columns/是你在找什麼。

參見示例：http://www.w3.org/TR/css3-multicol/#the-multi-column-model

Answer 2

你想要的CSS列，你只需要把文成不同的div的羣體。 here是一個顯示它的jsfiddle。這裏是我的CSS：

.mydiv 
{ 
-moz-column-count:2; /* Firefox */ 
-webkit-column-count:2; /* Safari and Chrome */ 
column-count:2; 
} 

Answer 3

老實說，我認爲最好的答案，這一個是完全避免分頁。人們很習慣閱讀單欄博客，新聞報道，文章等。我只是設置max-width:800px; width:95%; margin:0 auto;並將其作爲一個長流。

這可能會導致問題，如果您有圖像負載，但可以通過只加載所需的，可以解決，請參閱lazy loading。

這是個人觀點。記住頁面可以長，只要你喜歡，分頁是爲書;）

祝你好運。

Answer 4

我玩了一下。它只是用純文本工作，但是響應。

(function($) { 
    $.fn.fitcol = function(options) { 

      changes = function(el) { 
        var $el = $(el), 
          settings = $.extend({ 
          intendedheight: $(window).height() - ($el.outerHeight()-$el.height()), // set default intended height (rough estimation: height of window - padding and border) 
        }, options), 
          height = $el.height(), 
          ratio = height/settings.intendedheight, 
          text = $el.text(), //clear all inner html (should be fixed) currently needed in case of window resize 
          length = text.length, 
          intendedlength = Math.floor(length/ratio), 
          i = 1, 
          html = '</div><div class="column">'; //code for a breakpoint 
          text = '<div class="column">' + text; 
       var correction = 20; 
       while((intendedlength * i) + correction < text.length) { // loop to put breakpoints into the text 
        var j = 0 
        while(text.charAt((intendedlength * i) + correction) !== ' ' && j<= 20) { //loop so we don't break words 
           correction--; 
           j++; 
           } 
        text = text.substr(0, (intendedlength * i) + correction) + html + text.substr((intendedlength * i) + correction); 
        correction += html.length; // we are changing the length of text when we add html 
        i++; 
       } 
       text = text + '</div>'; 

       $el.removeClass('column'); 
       $el.html(text); 

      }; 
      //make it responsive 
      return this.each(function() { 
        var that = this; 
        $(window).resize(function() { 
          changes(that); 
        }); 
        changes(this); 
      }); 
    }; 
}(jQuery)); 

$('.container').fitcol(); 

看到它http://codepen.io/wudi96/pen/doXYrv

這是非常實驗和遠離beeing優化。

將很高興與panelSnap http://guidobouman.github.io/jquery-panelsnap/一起使用。