在使用
CSS3列时,如何停止浏览器分解段落？我有这个代码：
<div class="container">
<div class="Box"><!-- text --></div>
<div class="Box"><!-- text --></div>
<div class="Box"><!-- text --></div>
<div class="Box"><!-- text --></div>
<div class="Box"><!-- text --></div>
<div class="Box"><!-- text --></div>
<div class="Box"><!-- text --></div>
<div class="Box"><!-- text --></div>
</div>
.container {
column-count: 3;
}
这是我想要的视觉表现.在左边,默认情况下会发生什么,在右边,我想要发生什么.
我不介意列是不等长的,重要的是没有任何div在列之间被打破.
解决方法
设置拆分：根据CSS多列布局模块中的
break-inside的描述,避免这样做.但是
browser support是有限的,所以你需要另外使用一些反映旧草稿中的想法的其他设置,在某些浏览器中实现：
.container {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
div.Box {
text-indent: 1em; /* To show paragraph starts. */
page-break-inside: avoid; /* For Firefox. */
-webkit-column-break-inside: avoid; /* For Chrome & friends. */
break-inside: avoid; /* For standard browsers like IE. :-) */
}
<div class="container">
<div class="Box">This is a short paragraph.</div>
<div class="Box">This is a short paragraph,too.</div>
<div class="Box">This is yet another short paragraph.</div>
<div class="Box">This is a short paragraph.</div>
<div class="Box">This,too,is a short paragraph.</div>
<div class="Box">This is a longer paragraph,which may get divided into two columns..</div>
<div class="Box">This is a short paragraph.</div>
<div class="Box">This is a short paragraph.</div>
</div>
