html怎么把字符串拆分,将html字符串拆分为多个页面

做任何形式的HTML/DOM解析都会让你走上困境，我想，这意味着你正在开始开发自己的HTML布局引擎。

使用CSS3列函数是一个更好的主意。基本上，让您的内容在固定的宽度和高度栏内呈现。这成为你的页面。然后将您的内容位置左移以在页面之间移动，并将其包装在隐藏溢出元素的容器中。

我们的HTML将主要是：

CONTENT GOES HERE

Previous

Page N of M

Next

我们基本的CSS是：

#container {

width: 240px;

overflow: hidden;

background-color: yellow;

}

#content {

position: relative;

height: 30em;

-moz-column-width: 240px;

-webkit-column-width: 240px;

column-width: 240px;

-moz-column-gap: 10px;

-webkit-column-gap: 10px;

column-gap: 10px;

}

现在，我们将设置left CSS属性为＃内容，页面之间切换的倍数 - 250像素。

我们只需要计算出我们的内容需要多少列，并且我们已经分页。 How to get css3 multi-column count in Javascript给出了一个提示：我们将从#endMarker的左边位置找到它。

这是一个工作示例http://lateral.co.za/pages.html，第一章是Moby Dick。它适用于Chrome和Android，但不适用于Firefox - 我认为是因为CSS列实现的差异。由于我们对Android感兴趣，因此代码很好。

最重要的部分是：

的CSS设置如上。

加入的含量(但#content DIV内)后

加入#previous和#next按钮和#page跨度，所有的#container外部。

这个JavaScript的jQuery加载后： var _column = 0;

var _columnCount = 0;

var _columnWidth = 240;

var _columnGap = 10;

$(function() {

_columnCount = Math.floor($('#endMarker').position().left/(_columnWidth + _columnGap));

setColumn = function(i) {

_column = i;

document.getElementById('content').style.left = -1 * _column * (_columnWidth + _columnGap);

$('#page').html('Page ' + (_column+1) + ' of ' + (_columnCount+1));

}

$('#next').click(function() {

if (_column==_columnCount) return;

setColumn(_column+1);

});

$('#previous').click(function() {

if (0==_column) return;

setColumn(_column-1);

});

setColumn(0);

});

就是这样。

有工作的空间。有人可能想要考虑计算列数，我把它从引用的SO帖子中吸取出来，但实际上并没有想到它......容器的宽度似乎影响了内容的列宽，这对我来说并不完全有意义。

但至少在一切似乎工作，而不必做任何HTML解析和自己的布局，至少在Chrome和Android。