停止 CSS3 列拆分段落答案

【问题标题】：Stop CSS3 columns breaking paragraphs up停止 CSS3 列拆分段落
【发布时间】：2014-11-10 22:21:46
【问题描述】：

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

【问题讨论】：

标签： html css layout multiple-columns

【解决方案1】：

设置break-inside: avoid会这样做，根据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>

【讨论】：

我现在来到这里是因为我有一个案例，这似乎在 Chrome 上不起作用——Mac 和 Win 都不起作用（在 Win、Ubuntu 和 Mac 上是 FF OK，在 Ubuntu 上是 FF）；但是，除了 .box 上的 inline-block （根据下一个答案）之外，上述内容也起到了作用。嗯。
如果这些解决方案都不起作用，我们应该怎么做？

【解决方案2】：

在.box上添加样式：

.box {
    display:inline-block;
    ... other styles ...
}

演示：http://jsbin.com/murog/1/

【讨论】：

display: inline-block; 有效，感谢您的回答:) 但是，我得到的另一个答案涉及使用 break-inside: avoid; 更适合我使用它的目的。但作为后备，display: inline-block; 工作正常 :)
注意：如果您有多个连续的段落短于列宽的一半 - 它们将呈现在同一行。真实内容极不可能发生，但是当我测试我的风格时，这让我感到困惑。有关解决方法，请参阅 stackoverflow.com/a/29402718/924597。
不幸的是，这些答案都不起作用。我有同样的问题，一个div中有几个段落。需要
内容不中断，并保持在一起，我已经尝试了一切，没有任何方法可以将文本保持在一起，没有任何方法可以将

推送到下一列。您也许可以将所有

元素包装在一个 div 中并告诉 div 不要中断，但这并不理想。