首先，在我的思路中，在制定多页，和重排版功能的实现，可能需要用到CSS3的一个属性：column-count:3(多列)思路是这样的，也不知道对不对，用HTML5+CSS3写一个可阅读的文本，然后用column-count属性进行分列，在移动端里，那么一本书就相当于一个页面，而每一页则相当于一列，而通过改变column-count的值则实现了重排版功能。不多说分享示例代码。
webkit-column测试 body {background: #FFFFFF;}strong {color:#ff0000;}p {margin:0;text-indent:2em;}* {-webkit-transition: all 200ms linear;}#control {position: relative;z-index: -1;} window.onload = function() { var c_box = document.getElementById("control"); var gCount = document.getElementById("get_count"); var col_num = document.getElementById("column_num"); col_num.onchange = function() { gCount.innerHTML = " .c_count { -webkit-column-count:" + col_num.value + ";} " + col_num.value + " 栏"; c_box.style.zIndex = "1"; } var gGap = document.getElementById("get_gap"); var col_gap = document.getElementById("column_gap"); col_gap.onblur = col_gap.onchange = function() { gGap.innerHTML = " .c_count { -webkit-column-gap:" + col_gap.value + ";} " + col_gap.value + " "; } var col_rule_c = document.getElementById("column_rule_color"); var col_rule_v = document.getElementById("column_rule_va"); var col_rule_t = document.getElementById("line_type"); var gRule = document.getElementById("get_rule"); col_rule_t.onchange = function() { if(col_rule_c.value == undefined || col_rule_v.value == ""){ col_rule_v.value = "1px"; col_rule_c.value = "#FF0000"; } gRule.innerHTML =" .c_count { -webkit-column-rule:" + col_rule_v.value + " " + col_rule_c.value + " " + col_rule_t.value + ";} -webkit-column-rule:" + col_rule_v.value + " " + col_rule_c.value + " " + col_rule_t.value + " "; } col_rule_c.onchange = function() { if(col_rule_t.value == "" || col_rule_v.value == ""){ col_rule_v.value = "1px"; col_rule_t.value = "solid"; } gRule.innerHTML =" .c_count { -webkit-column-rule:" + col_rule_v.value + " " + col_rule_c.value + " " + col_rule_t.value + ";} -webkit-column-rule:" + col_rule_v.value + " " + col_rule_c.value + " " + col_rule_t.value + " "; } col_rule_v.onchange = function() { if(col_rule_t.value == "" || col_rule_c.value == undefined){ col_rule_c.value = "#FF0000"; col_rule_t.value = "solid"; } gRule.innerHTML =" .c_count { -webkit-column-rule:" + col_rule_v.value + " " + col_rule_c.value + " " + col_rule_t.value + ";} -webkit-column-rule:" + col_rule_v.value + " " + col_rule_c.value + " " + col_rule_t.value + " "; } var cBI = document.getElementById("column_break_inside"); var gBI = document.getElementById("get_break_inside"); var show_b_v = "auto"; var show_b_v_a = "avoid"; cBI.onchange = function() { if(this.value != 0){ gBI.innerHTML = " .c_count p:nth-child(" + this.value + ") {-webkit-column-break-inside: " + show_b_v_a + ";} 第" + this.value + "行必须在一栏中 -webkit-column-break-inside: " + show_b_v_a + " "; }else{ gBI.innerHTML = ""; } } var cBB = document.getElementById("column_break_before"); var gBB = document.getElementById("get_break_before"); var show_bb_v = "auto"; var show_bb_v_a = "always"; cBB.onchange = function() { if(this.value != 0){ gBB.innerHTML = " .c_count p:nth-child(" + this.value + ") {-webkit-column-break-before: " + show_bb_v_a + ";} 第" + this.value + "行前开始断开 -webkit-column-break-before: " + show_bb_v_a + " "; }else{ gBB.innerHTML = ""; } } var cBA = document.getElementById("column_break_after"); var gBA = document.getElementById("get_break_after"); var show_ba_v = "auto"; var show_ba_v_a = "always"; cBA.onchange = function() { if(this.value != 0){ gBA.innerHTML = " .c_count p:nth-child(" + this.value + ") {-webkit-column-break-after: " + show_ba_v_a + ";} 第" + this.value + "行之后开始断开 -webkit-column-break-after: " + show_ba_v_a + " "; }else{ gBA.innerHTML = ""; } } var cS = document.getElementById("column_span"); var gS = document.getElementById("get_span"); var show_S_v = "auto"; var show_S_v_a = "all"; cS.onchange = function() { if(this.value != 0){ gS.innerHTML = " .c_count p:nth-child(" + this.value + ") {-webkit-column-span: " + show_S_v_a + ";padding:10px;background-color:rgb(250, 252, 212);} 第" + this.value + "行通栏显示 -webkit-column-span: " + show_S_v_a + " "; }else{ gS.innerHTML = ""; } }} 栏数：
查看更多关于我的项目8css属性，实现阅读器重排版功能_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did105686