Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="div1">  
  当春风再一次吹拂她的脸庞时,那场让她刻骨铭心的失恋已在煦风轻扬的季节淡去了。她一点点地恢复,仿佛重生一般,花儿般的笑颜又重新浮上了她的脸庞。而他,看到她康复的样子,高兴极了,但他却不会讲什么,依旧如故,默默地陪在她身旁。他爱她,就包括爱她的一切缺点。这样做,他并不觉得有失尊严。他认为既然爱了,就应该无怨无悔。而她,觉得开始有点喜欢上了他,有些依赖他。但她认为,离爱还很遥远。<br/>  
  转眼她和他都要毕业了,她甚至没有征求他的意见,就直接去了北方的一座城市,而他,却追随着她也到了这里。本来,在南方那座城市,他的家人早已给他联系好了一家不错的公司,但他连想都没想就拒绝了。她和他分别进了不同的公司。同在一个陌生的城市打工,难免心神俱疲,这个时候,她就很想找一个依靠,给她一点家的温暖。明明知道他一直愿意做她的依靠,可她却不愿意把自己的一生交付于他,因为她觉得自己一直不爱他,不爱,又如何依靠,再说,他也不能提供给她想像中的生活。  
</div>    
<hr/>  
<div id="div2">  
  当春风再一次吹拂她的脸庞时,那场让她刻骨铭心的失恋已在煦风轻扬的季节淡去了。她一点点地恢复,仿佛重生一般,花儿般的笑颜又重新浮上了她的脸庞。而他,看到她康复的样子,高兴极了,但他却不会讲什么,依旧如故,默默地陪在她身旁。他爱她,就包括爱她的一切缺点。这样做,他并不觉得有失尊严。他认为既然爱了,就应该无怨无悔。而她,觉得开始有点喜欢上了他,有些依赖他。但她认为,离爱还很遥远。<br/>  
  转眼她和他都要毕业了,她甚至没有征求他的意见,就直接去了北方的一座城市,而他,却追随着她也到了这里。本来,在南方那座城市,他的家人早已给他联系好了一家不错的公司,但他连想都没想就拒绝了。她和他分别进了不同的公司。同在一个陌生的城市打工,难免心神俱疲,这个时候,她就很想找一个依靠,给她一点家的温暖。明明知道他一直愿意做她的依靠,可她却不愿意把自己的一生交付于他,因为她觉得自己一直不爱他,不爱,又如何依靠,再说,他也不能提供给她想像中的生活。  
</div>
              
            
!

CSS

              
                #div1{  
-moz-column-count:2;  
-webkit-column-count:2;  
}  
#div2{  

border:6px solid orange;  
padding:6px;  
text-align:justify;  
-moz-column-width:20em;  
-moz-column-gap:3em;  
-moz-column-rule:6px solid blue;  
-webkit-column-width:20em;  
-webkit-column-gap:5em;  
-webkit-column-rule:6px solid blue;  
}
              
            
!

JS

              
                
              
            
!
999px

Console