问题：当我们使用多列布局时，内容超出布局范围，此时内容形式可能出现预想之外的样子。
方案：取消对设置多列布局的区域的高度限制。
// 可能会遇到跨域问题，请在菜鸟随便某个页面（https://www.runoob.com/try/try.php?filename=trycss3_column-rule-style）中输入下面的内容进行测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多栏打印</title>
<style>
.newspaper
{
column-count:3;
column-gap:40px;
column-rule-style:dotted;
/*-moz-column-break-after: always;*/
/*-webkit-column-break-after: always;*/
/*column-break-after: always;*/
-webkit-column-rule-style:dotted;
/* A4 */
width: 210mm;
/* height: 297mm; */
page-break-after: always;
}
.outer {
width: 210mm;
height: 297mm;
overflow-x:hidden;
}
</style>
<script>
function myPrint(obj){
var newWindow=window.open("打印窗口","_blank");
debugger;
var docStr = obj.outerHTML;
newWindow.document.write(docStr);
// 打印窗口需要携带样式
var styles = Array.from(window.document.styleSheets)[0];
var styleText = Array.from(styles.rules).filter(rule => [".newspaper"].includes(rule.selectorText)).map(rule => rule.cssText).join(';')
newWindow.document.head.innerHTML = `<style>${styleText}</style>`
newWindow.document.close();
newWindow.print();
newWindow.close();
}
</script>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>
<button onclick="myPrint(document.getElementById('print'))">打 印</button>
<div class="outer">
<div class="newspaper" id="print">
我的老家，一个山清水秀的地方。曾经，我家住在离学校很近的地方，妈妈很勤劳，看屋后靠河边有一块空地，就抽空清理了一番，建成了一个小菜园。春季一到，妈妈就开始在菜园里忙碌起来了：有的种上白菜，有的种上黄瓜，有的种上了蒜苗、小葱等。这些种着蔬菜的地被分成了一块又一块，或淡雅一片，或碧绿一片，或红灿一片……小小的菜园成了一个五彩缤纷的世界。夏季暖暖地来临了，这些蔬菜成熟了，菜园里又呈现出一派生机勃勃的景象。空闲时，妈妈便挎着一个小篮子到菜园，采些豆角什么的，在门口剥剥洗洗，所以我们总能吃到新鲜的蔬菜，感觉幸福极了。我也经常会到小菜园中去。有时，会看到一只螳螂或几只蜜蜂的，我便立刻拿起随身携带的小瓶子，猛地一下作文Https://wWw.ZuoWen8.CoM/罩住它，然后带到自己的房间里，用放大镜仔细观察一番，看看它的眼睛在哪儿，看看它的翅膀上有什么呢，看看……然后我会把他们放了，可有时一不小心也会遭到蜜蜂的报复，被它“蛰”一下，很疼很疼的。但我忍受了，我这是“自作自受”吧！我并不是一直这么“贪玩”。有时我也会帮助妈妈锄锄菜园中的杂草，用锄头挖时，常常会挖到一些不知名的虫，大的大约有四、五厘米长。它，圆圆大大的脑袋，全身有着硬硬的“铠甲”，前足特别大，力气也十分大，我想它钻土时应该很省力了吧。这虫看上去一点也不可怕，很可爱，要是有机会，我真想把他当宠物养。菜园是我的乐园。这小菜园不仅给我家提供了蔬菜，也给我提供了无限的乐趣。我爱老家的这个小菜园，更爱我勤劳的妈妈。这件事发生在四年级的时侯，虽然已经被其他人所淡忘，但是它还是一直缠绕在我心头。那是一节音乐课，我们上课时突然发现，窗外来了一群三年级的小朋友，边往教室里张望边做鬼脸，他们的挑衅把我们惹火了，一下课我们便冲了过去。男同学们挥舞着拳头，要给这些“小麦麦”一些厉害。我拿着口风琴挥舞，没想到却不偏不倚地击中了一个小朋友的鼻子，他顿时鲜血直流，我也慌了手脚。我慌忙扶他到了卫生间，给他冲洗止血，这件事让我酿成了大祸，我尴尬地脸都红了。之后，我连忙去给他赔礼道歉。那位小朋友很大度地原谅了我，他没去告状，也没有家长来找我，本来我应该作文感到幸运，但我的心早已被浓浓的愧疚所占据，它使我感到悔恨不已，像打翻了一瓶苦瓜汁，一点也不舒服。我的心头很不是滋味，那位小朋友的血止住了，可我的内疚却一直持续着，心中酸酸的，甚至有时做梦都会梦到。我几乎不让别人知道这件事，一直把它藏在心里。可藏得越久，心中的愧疚便越深。尽管小朋友原谅了我，爸妈也不再批评我，但我却甚是不快，这样的内疚时隐时现，直到现在也难以忘却。当我遇见他时，由于心中的歉意，我总会择道而行，没脸再见他。这感觉在我心中埋藏了两年多，但我还是时常想起他。以后我不能再犯这样的错误了，就让这件事继续埋在心底吧。国庆节长假，爸爸妈妈带我到横店的梦幻谷景区游玩。在出发前的晚上，我兴奋地睡不着，恨不得一眨眼天就亮了。好不容易熬过了天亮，我就催着妈妈起床。就这样，我们坐着大巴快乐地出发了。经过三个小时的旅程，我们终于到达了梦幻谷景区。景区内人山人海，来自四面八方的游客摩肩擦踵。一个个游乐设施像个庞然大物。夜幕渐渐降临，在霓虹灯地装扮下，显得特别的耀眼，像一块块巨大的磁铁，吸引着大家。到处都是排队等候的人群，到处是尖叫声。看，弯弯曲曲的像高架桥似的水上乐园，双层的豪华旋转木马，在空中像一把把刷子似的365度会翻滚的“翻天覆地”……在一声声的尖叫声中，许多人乐翻都了，玩疯了！整个景区就像一个欢乐的海洋。经过一个多小时漫长的等候，我怀着激动的心情，坐上了“欢快蛙跳”，它的形状是巨大的仙人掌。升降椅把我们缓缓地升起，忽然，“登”的一下，往下滑了一下，吓得我们都张大了嘴巴，我感到脚底下轻飘飘的，软绵绵的。比起“欢快蛙跳”，“雪域飞鹰”简直太惊险了！在我强烈的央求下，妈妈答应带我玩这个游戏。它就像一个巨大的转盘，长长的铁链就像无数根辫子，拉着50位游客，在天空中“飞翔”，就像一只勇敢的鹰，在空中时而盘旋，时而俯冲速度非常的快。我吓地大叫，两腿直发抖，紧紧地闭上眼睛，只听见耳边呼呼地风声和尖叫声。我在心里想：“有什么好怕的，只要我勇敢地睁开眼睛，我要做一只勇敢的雄鹰，展翅高飞。”渐渐地，耳边的风声小了，人们的尖叫声也轻了许多。大转盘也缓缓地慢下来了。啊！这个游戏真是太惊险了！我们还观看了全球最大火山爆发实景演出——《梦幻太极》和《暴雨山洪》影视高科技表演，暴雨如注，山洪如兽，有惊无险的自然灾难场景。时间过得飞快，我们依依不舍得离开了梦幻谷。去年国庆节时，我的书桌上多了一个鱼缸，这下它可成为了我最心爱的宝贝，以至于刚买回来它，我就开始观察它。鱼缸还是比较大的，它的长差不多半米，是五块玻璃板粘在一起做成的，鱼缸没有盖，只是右边装了灯，想台灯一样悬挂在鱼缸上边。听说这种鱼缸叫做生态鱼缸，鱼缸上面的灯是日光灯，可以为我照明，也能让水草增加更多氧气，这是对我有益的。此外，还可以给房间加湿，一个鱼缸有这么多功能，多么有趣！爸爸先往鱼缸中倒入褐色的小石子，把他们压平，然后放入装饰用的木头、石块。然后再铺一层石子，这次铺的有高有低。铺好后，爸爸小心翼翼的放进去一些水，现在就开始种水草了，爸爸把水草用镊子插进土中，我仔细观察这些插进去的水草，它们有的像苔藓，有的像藤蔓，有的像野花的叶子，各种各样。种好水草，这次把鱼缸里放满水，顿时，鱼缸绿了起来，水草摇动着，让我想起一望无际的麦田。过了一个月，我们买了一些热带鱼放进缸中，鱼缸又变得生机勃勃起来，玲珑娇小的热带鱼像是小精灵，灵巧的在水草中自由穿梭，五颜六色的鱼儿们成群结队的四处在鱼缸里游走，像一条五彩斑斓的带子，观察他们我每次都能收获很多，我也发现了很多细节，比如那两条红色小鱼，总是靠着水草繁茂的地方游动，而那群蓝色的却总是在水草少的开阔水域玩耍嬉戏……每一条鱼都那么独特，那么有趣！我写一会儿作业，总是看看我的宝贝鱼缸，给他们编一个个精彩的故事，这样既能让我感到快乐，也能保护我的视力，让我放松一下。观察他们，我的心情总是会好起来。我妈前几天回家陪外婆过六十大寿。发现家里变了许多。回家时，没有了妈妈的关心和唠叨，反感觉浑身不自在，冷冷清清的家中我只能与3只乌龟兄陪伴，虽然十月一日我也去外婆家，但这几天已让我承受不了。虽然那天我与老妈离别时，我只是轻轻的挥手并觉得不以为然，但我没有想到的是，没有老妈的日子我会是那般的寂寞没有老妈的日子真苦，家里的衣服裤子堆积如山。如果老妈不在家，只有对家务一点都不懂的老爸。家里凌乱不堪，最干净的也就是我家的鱼缸了吧，我多么希望我也是鱼缸中的一只乌龟。乌龟们都有个伴而我为什么无人陪伴？妈妈不在的日子里的，我基本没什么胃口，吃的饭量也仅次与乌龟，在晚上我的梦里都频频出现了妈妈的头像，我不停的呼唤着妈妈，直到第二天。现在基本都是我当家，早上自己吃早餐，晚上自己回家，回家后还要打扫房间，给乌龟兄换水……特别是在晚上，小区里静悄悄的，只有几盏昏暗的灯光，走路的脚步声也能被听见，我慢慢地慢慢地走到家门口，狂按501的门铃，顺便环顾四周，左看看，右看看。“哐”的一声门开了。我把门拉开，走了进去，突然门“碰”的关了。我脸上直放冷汗好像就有人在我背后似的，我飞速地跑，拼命地跑，1楼，2楼，3楼，4楼，5楼快到的时候，我险些摔倒。不过终于到家了，我的心怦怦直跳，好久不得平静。这和妈妈一起走势截然不同的，就仿佛有一座靠山，助我驱散妖魔鬼怪。没有妈妈的日子，家变了，变得跟两个世界一样。以前，家里是热热闹闹，现在变得冷冷清清，气氛完全变了。妈妈没有你的日子，真的不好过。我宁愿天天听您的训斥，也不要再离您而去了。妈妈快点回来吧！10月2日早上吃完了早饭，我们带好我们各自的东西到了沙坡头景区。我们一家一起玩了滑沙、骑骆驼、越野车、滑草··········。可好玩了，其中越野车最恐怖，开越野车的叔叔给我们开的很很疯狂，一上车我的心里就开始害怕了，越野车一会儿上坡一会儿下坡，把我吓得眼睛都不刚睁开了，两只手紧紧地抓着车上的扶手，妈妈的胆子最大了一点也不害怕，还不停地叫着：“真好玩真好玩呀！”。我们还玩了滑沙，滑沙是从80多米搞得山子山上滑下来，我们下乘坐电梯到达顶上，让后坐上一块木板子，又搞出滑下来，那儿的沙子特别细很舒服，我和姐姐光着脚玩的特别开心，从高处滑下来的时候，我看见姑爹连滚带爬的摔了好几个滚呢，好像再给我们表演节目，因为沙子很软所以姑爹只是摔得满身沙子，所以我们都哈哈大笑。我分析了一下姑爹摔跤的原因是，他把大背包放在了背后，所以才摔跤的。滑草很无聊。我最喜欢玩越野车、滑沙和骑骆驼。我骑了两次骆驼，骆驼很温顺，我好喜欢我骑的骆驼。妈妈还给我们买了纪念品“骆驼玩具”我们还拍了许多照片。在沙坡头我玩的好开心呀！我喜欢我的纪念品骆驼玩具！10月1日，天气晴朗，是举国欢庆的日子。爸爸妈妈带我去桐庐玩，我开心得不得了。爸爸开车大约一个半小时到达桐庐。我们首先去了位于桐庐瑶琳镇的瑶琳仙境，爸爸说这里以前是神仙居住的地方，我简直不敢相信，在好奇心的驱使下，我和爸爸妈妈进入了“仙境”。进入洞里我看到了许多奇形怪状的钟乳石，有的像狮子，有的像大象，我还看见一只“小猫”和一只“老鼠”，听导游说，从前有一只“老鼠”总是要到村子里偷米吃，村民们就养了一只“猫”来捉“老鼠”。参观了瑶琳仙境，我觉得里面的钟乳石太神奇了，让我惊叹大自然的鬼斧神工。让我印象最深的还是大奇山国家森林公园，到了那里以后，我和爸爸妈妈进入了一大片竹林，我听见许多小鸟在歌唱，仿佛在迎接客人呢。爬到半山腰，我看见了清澈见底的湖水，水里还有小鱼在嬉戏呢！远处的瀑布倾泻而下，让我想起了唐朝诗人李白的一句诗：飞流直下三千尺，疑是银河落九天。又走了一会儿，我们看见了绳索桥，我问妈妈：“妈妈，你走不走绳索桥啊？”妈妈说：“我才不走呢，因为我穿的是高跟鞋。”我仔细一看，没想到桥下面是河流，掉下去就没命了呢。虽然害怕，但我还是忐忑不安地跟着爸爸走过了绳索桥，真是惊险啊！最后我和爸爸妈妈爬到了山顶，看到了公园里最大的一处瀑布，我们还在那拍照留念呢，今天玩得好开心啊！下次我还要爸爸妈妈带我去更好玩的地方。十月一日国庆节，今天天气特别好，阳光明媚，我和爸爸妈妈一起去乡下表哥家挖红薯。来到一片绿油油的农田里，我好奇地问爸爸：“红薯呢？”爸爸笑着对我说：“红薯是长在地底下的，上面长的只是它的茎叶，所以说我们是来‘挖’红薯！”这时，我忽然想起了一年级学过的课文《小松鼠找花生果》，原来红薯和花生果一样全都藏在地底下呢！开始挖红薯了，只见爸爸拿起镰刀先把泥土上面绿色的茎叶割掉，然后再用铁耙把泥翻开。啊，埋在地下的红薯露出来了！我和表哥迫不及待地挖了起来，我一只按着红薯，一只手拿着铲子把它旁边的泥土挖掉。可是我的力气太小，挖了好一会儿，红薯还埋在泥土里拔不出来。妈妈看见了想来帮忙，我急忙阻止说：“这个让我来搞定！”我毫不气馁，继续使劲地挖、使劲地铲，红薯有点松动了，我急忙放下铲子，双手用力一拔，啊！一个大大的红薯被我拔起来啦！一个下午，我们挖得满头大汗，挖了整整两篮子红薯，它们有大有小，大的像葫芦，小的像小球。哦。我还挖到了一条大蚯蚓呢，今天真是最棒的一天！
</div>
</div>
</body>
</html>
网友评论