更好的方法是生成您自己的列。
查看我的jsfiddle demo，它使用lib_columns.js、jquery.js 和jquery.easyPaginate.js。
有关easyPaginate.js 的更多信息，请参阅website。
有关 lib_columns.js 的更多信息，请参阅website。
CSS
<style type="text/css">
html, body { overflow: hidden; height: 100%; }
/* Hide the source containers, by visual only. */
#divSizer, #content {
visibility: hidden;
position: absolute;
left: -9999px;
}
/* E-book */
.ebook-container {
position: relative;
background: #CCC;
}
#ebook {
/*width: 300px; (generated by JavaScript) */
/*height: 500px; (generated by JavaScript) */
margin: 0 auto;
border: 4px dashed red;
/*overflow: auto; (Provide scrollbar) */
}
/* Pagination Menu */
.ebook-container .easyPaginateNav {
position: absolute;
bottom: -2em;
width: 100% !important;
text-align: center;
}
.ebook-container .easyPaginateNav a { padding: 5px; }
.ebook-container .easyPaginateNav a.current { font-weight: bold; }
/* Show only the current page in pagination, hide the rest. */
.ebook-container .easyPaginateNav a.page { display: none; }
.ebook-container .easyPaginateNav a.page.current { display: inline; }
/* Text-size Menu */
.ebook-container .textSizeNav {
position: absolute;
bottom: -70px;
width: 100%;
text-align: center;
}
</style>
HTML
<body style="font-size: 1.4em;">
<div id="divSizer"></div>
<div id="content">
<h2>7.1 Introduction to media types</h2>
<p>One of the most important features of style sheets is that they
specify how a document is to be presented on different media: on the
screen, on paper, with a speech synthesizer, with a braille device,
etc.</p>
<h3>Features of Style Sheets</h3>
<p>Certain CSS properties are only designed for certain media (e.g.,
the 'cue-before' property for aural user agents).
On occasion, however, style sheets for different
media types may share a property, but require different values for
that property. For example, the 'font-size' property is useful both
for screen and print media. However, the two media are different
enough to require different values for the common property; a document
will typically need a larger font on a computer screen than on paper.
Experience also shows that sans-serif fonts are easier to read on
screen, while fonts with serifs are easier to read on paper. For
these reasons, it is necessary to express that a style sheet -- or a
section of a style sheet -- applies to certain media types.</p>
<h4>Features of Style Sheets</h4>
<p>One of the most important features of style sheets is that they
specify how a document is to be presented on different media: on the
screen, on paper, with a speech synthesizer, with a braille device,
etc.</p>
<p>Experience also shows that sans-serif fonts are easier to read on
screen, while fonts with serifs are easier to read on paper. For
these reasons, it is necessary to express that a style sheet -- or a
section of a style sheet -- applies to certain media types.</p>
<h4>Document to be Presented</h4>
<p>Experience also shows that sans-serif fonts are easier to read on
screen, while fonts with serifs are easier to read on paper. However,
the two media are different enough to require different values for the
common property</p>
<p>Certain CSS properties are only designed for certain media (e.g.,
the 'cue-before' property for aural user agents).
On occasion, however, style sheets for different.</p>
<h4>Features of Style Sheets</h4>
<p>One of the most important features of style sheets is that they
specify how a document is to be presented on different media: on the
screen, on paper, with a speech synthesizer, with a braille device,
etc.</p>
<p>Experience also shows that sans-serif fonts are easier to read on
screen, while fonts with serifs are easier to read on paper. For
these reasons, it is necessary to express that a style sheet -- or a
section of a style sheet -- applies to certain media types.</p>
<h4>Document to be Presented</h4>
<p>Experience also shows that sans-serif fonts are easier to read on
screen, while fonts with serifs are easier to read on paper. However,
the two media are different enough to require different values for the
common property</p>
<p>Certain CSS properties are only designed for certain media (e.g.,
the 'cue-before' property for aural user agents).
On occasion, however, style sheets for different.</p>
</div>
<div class="ebook-container">
<div id="ebook"></div>
<div class="textSizeNav">
<button id="plustext" class="btn btn-circle" onclick="resizeText(1); $(window).resize();">A<sup><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span></sup></button>
<button id="minustext" class="btn btn-circle" onclick="resizeText(-1); $(window).resize();"><small>A</small><sup><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></sup></button>
</div>
</div>
<script src="https://cdn.rawgit.com/dpup/13thparallel.com/master/static/archive/column-script/lib_columns.j"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://st3ph.github.io/jquery.easyPaginate/js/jquery.easyPaginate.js"></script>
<script src="jquery.easyPaginate.func.my_paginate.js"></script>
<script src="my_app.js"></script>
</body>
JAVASCRIPT - jquery.easyPaginate.func.my_paginate.js
<!-- jquery.easyPaginate.func.my_paginate.js -->
<script>
function my_paginate(book_selector, content_selector, params)
{
// Override default options.
params = $.extend({
pageWidth: 300,
pageHeight: 500,
earlyCutOff: 0,
paginateElement: 'div',
elementsPerPage: 1,
effect: 'default', // Choose: 'fade', 'slide', or 'climb'
prevButtonText: '<',
firstButtonText: '<<',
nextButtonText: '>',
lastButtonText: '>>'
}, params);
// If content container is empty, then break.
var content = $(content_selector);
if (content.length == 0) return;
// Reset easyPaginate:
// - Check if pagination already exists.
// - Remove pagination, and clear the e-book container.
var sel = '.easyPaginateNav';
var pagination = $(book_selector).parent().children(sel);
if (pagination.length > 0) {
pagination.first().remove();
$(book_selector).html('');
}
// Generate pages. (splits the content)
// Note: All pages will have:
// - class="page"
// - data-page-num="*"
var cols = Columns.splitText(
content.html(),
params.pageWidth,
(params.pageHeight - params.earlyCutOff) // Sometimes too long.
);
for (var i = 0; i < cols.length; i ++)
{
$(book_selector).append(
'<' + params.paginateElement +
' class="page"' +
' data-page-num="' + (i + 1) + '"' +
'>' +
cols[i] +
'</' + params.paginateElement + '>'
);
}
// Prepare the e-book container.
var book = $(book_selector);
book.css('width', params.pageWidth + 'px');
book.css('height', params.pageHeight + 'px');
// Generate/render E-book.
book.easyPaginate({
paginateElement: params.paginateElement,
elementsPerPage: params.elementsPerPage,
effect: params.effect,
prevButtonText: params.prevButtonText,
firstButtonText: params.firstButtonText,
nextButtonText: params.nextButtonText,
lastButtonText: params.lastButtonText
});
}
</script>
JAVASCRIPT - my_app.js
<!-- my_app.js -->
<script>
// When document is ready.
$(function() {
// When the screen size/dimensions changes:
$(window).on("resize", function() {
// Current screen size.
var width = $(window).width() - 150; // 150px gutter.
var height = $(window).height() - 125; // 125px gutter.
// Render e-book.
my_paginate('#ebook', '#content', {
pageWidth: width,
pageHeight: height,
prevButtonText: '<span class="glyphicon glyphicon-step-backward" aria-hidden="true"></span>',
firstButtonText: '<span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span>',
nextButtonText: '<span class="glyphicon glyphicon-step-forward" aria-hidden="true"></span>',
lastButtonText: '<span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span>',
earlyCutOff: 50
});
}).resize(); // Force trigger a resize event.
});
</script>
JAVASCRIPT - 额外
<script>
function resizeText(multiplier) {
if (document.body.style.fontSize == "") {
document.body.style.fontSize = "1.0em";
}
document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em";
}
</script>
评论
使用 CSS 列（通过“columns:”属性）会很困难，因为这些列是由 CSS 而不是 HTML 生成的。
使用 HTML（标记），我们在 DOM 中拥有列，因此可以更好地与它们交互和操作。
然后您可以使用 JavaScript 库（例如 jQuery）与您的列进行交互和操作。