Question

我有一个页面，提供了一篇很长的文章，以便阅读。我想将文本分成宽屏幕上的列，但我不想让用户一直滚动到页面底部，然后在完成每一列后再次返回顶部。

有没有办法在不使用JavaScript的情况下自动将文章拆分为垂直部分（'pages'），这些部分足够短以完全适合视口？这里有一些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

我玩了一下。它只适用于纯文本，但具有响应性。

(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

上查看

这是非常实验性的，远远没有进行优化。

与panelSnap http://guidobouman.github.io/jquery-panelsnap/一起使用会很高兴。

Answer 2

我认为http://quirksmode.org/css/columns/正是您所寻找的。

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

Answer 3

你想要css列，你只需要将文本放入不同的div中。 here是一个显示它的jsfiddle。这是我的css：

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

Answer 4

老实说，我认为这个问题的最佳答案是完全避免分页。人们习惯于阅读单列博客，新闻报道，文章等。我只是设置max-width:800px; width:95%; margin:0 auto;并将其作为一个长流。

如果您有大量图片，这可能会导致问题，但只能通过加载所需图片来解决，请参阅lazy loading。

这是个人观点。记住页面可以随意，书籍分页;）

祝你好运。

我可以自动将CSS列拆分为＆＃39;页面＆＃39;在视口内垂直放置？

4 个答案: