html - 停止 CSS3 列分解段落

Question

在使用 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 跨列。

Answer 1

根据 break-inside 的描述，设置 break-inside: avoid 会这样做在 CSS 多列布局模块中。但是browser support是有限的，因此您需要额外使用一些其他设置来反射(reflect)旧草稿中的想法，并在某些浏览器中实现:

.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>