概况
目前epub的阅读器是以分页形式显示正文的，epub本身是个流式文本（reflowable），根据设备宽度和设置的文本大小，文本会自动换行往下自动顺排，所以页码没有什么意义；当然目前epub3也有固定排版的属性了，这个在后面介绍。
一旦文本排满了屏幕，就会换到下一页继续排版。不过，有的情况下可能需要未排满时强制进行分页，或是有的文本块希望尽量保持到一起，不要分页。
强制分页
这个是阅读器都支持的属性，不过在sigil里不能预览效果。代码如下：
<html>
<head>
<style>
.flip {
page-break-before:always;
}
</style>
</head>
<body>
<h1 class="flip">标题1</h1>
<h1 class="flip">标题2</h1>
</body>
</html>
效果是标题2强制换一页显示。对于page-break-before而言，标题1有这个属性不会有任何影响，因为它前面没有元素了。
page-break-before主要有两个值可用：always和auto（还有avoid、left、right等，阅读器不支持），前者强制分页，后者跟没有写这个属性一样，到屏幕底部自动分页。
还有另一个page-break-after属性，区别是这个在元素之后强制分页。一般我们用before用得更多一点。
避免内部分页
这种情况比上面的需求更迫切。如果你使用了字符样式造出了一个漂亮的整体图案，结果却被阅读器一分为二了，如下图：
方框被分页断开了
看起来非常别扭。我们希望阅读器尽量完整显示灰色方框。
代码如下：
<html>
<head>
<style>
.avoidPageBreak {
page-break-inside:avoid;
}
</style>
</head>
<body>
<div class=”avoidPageBreak”>
<h3 class=”exHead”><span style=”color:gray;”>练习</h3>
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</div>
</body>
</html>
使用了page-break-inside属性之后，效果如下：
方框换了一页整体显示
page-break-inside属性如上面一样，也是avoid和auto两个值，后者相当于不使用这个属性。注意，只有div可以使用这个属性。table应使用break-inside属性。p、code等块标签不支持此属性。
还有一种情况，是图片和配套的说明文字，这两个如果被分页切断了，也不方便观看：
图片和说明文字被分开
语法与上面是一致的，将图片代码和说明文字都放在一个带此属性的div中即可。
图片和说明文字在一起
不过对于多看而言，多看的交互图代码已经默认有此效果了（昼夜图代码也有此效果），需要说明的是，多看的交互图代码只允许两个p标签（即主标题和副标题，当然你写两个主标题也可以）。
关于固定版式
多看目前不支持epub的固定版式，掌阅有个私有属性不允许调整字号，算是曲线支持固定版式；epub3和kindle目前都已经有了固定版式规范（包括每页内容固定，横屏竖屏固定等情况），epub3的规范目前只有gitden支持。iBooks有自己的私有规范来支持固定版式。iBooks还有很多私有属性，按苹果的尿性，反正别的平台别的阅读器也不支持，所以不展开说了。
网友评论