html – 停止CSS3列打破段落

在使用 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>