我有一个页面显示了一篇很长的文章，以便于阅读。我想在宽屏幕上将文本分成几列，但我不想让用户一直滚动到页面底部，然后在完成每一列后再次回到顶部。
有没有一种方法可以在不使用 JavaScript 的情况下自动将文章分成垂直部分(“页面”)，这些部分足够短以完全适合视口(viewport)？这里有一些 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? |
+-------------------------------------------------------------+
线条代表视口(viewport)的高度。列在视口(viewport)底部结束，文本流向下一列的顶部，下一列从视口(viewport)顶部开始。阅读该“页面”文本后，用户向下滚动到下一页并重新开始。这允许将文本分成几列而不需要大量额外的滚动。在大屏幕上，“页面”会很高，但在小屏幕上，它们会足够短以适合视口(viewport)。
一个好的解决方案不一定是完全语义化的，但不应该需要任何 JavaScript。
最佳答案
我玩了一下。它只适用于纯文本，但响应迅速。
(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/ .
关于html - 我可以自动将 CSS 列分解为 'pages' 以垂直放置在视口(viewport)内吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17768052/