css - 防止文本块上的分栏符？

Question

我试图阻止以下文本块中断，将“蓝色包”强制到右列。

HTML是这样的：

<h2 class="blue">Blue Package:</h2>
<p><strong>Thurs.</strong> $425.00 <strong>Friday-Sun</strong> $475.00</p>
<ul>
    <li>Party length:  2 hours</li>
    <li>12 guests. </li>
    <li>Each  additional child: $12.00</li>
    <li>1.5 hours of  creative building time in our building studio</li>
    <li>Enjoy pizza  or bagels for 12 children (plus the birthday child) in our party room</li>
    <li>Beverages</li>
    <li>Paperware</li>
    <li>Invites</li>
    <li>Thank yous</li>
    <li>12 mylar  balloons</li>
    <li>Builder&rsquo;s  certificates for each guest</li>
    <li>Favors: Lil&rsquo; Builders  12 oz. cup filled with your child&rsquo;s unique Lego creation or random Legos
    </li>
</ul>

我之前使用下面的 CSS 在整个段落上完成了它，但是如果我在 h2 标记上放置相同的 CSSstyling，它不会只强制 h2 到第二列。

 p {
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-o-column-break-inside: avoid; column-break-inside: avoid; display: table; }

有什么想法可以让整个文本块移动吗？

Answer 1

正确的属性实际上是break-inside，但除 Internet Explorer 10 之外的其他浏览器都没有很好地支持。我听说 usingpage-break-inside可以在 Firefox (Gecko) 中使用，但并非总是如此。

p, ul {
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid; /* Firefox */
    break-inside: avoid-column; /* CSS3, IE10+ */
    /* display: table; */
}