使用以下文本保持标题

时间:2013-10-03 02:18:26

标签: html css3 column-count

我正在使用css列计数功能将我的部分分成两列。在一个页面上,我在第一列的底部有一个h3标题,在下一个列的顶部有一个下面的p段。我想用标题的前几句来保留标题。我可以通过将两者都包装在使用内联块设置的div中来保留整个段落。这适用于短段,但不适用于长段。我也可以任意分解段落,但如果在标题强制进入下一列之前添加了额外的内容,我可能不得不将其重新组合在一起。如果由于列数是新的而无法实现,我不会感到惊讶。

更新

根据以下@Jon的建议,我尝试了在网上找到的关于我知道关键词的例子的内容。

CSS:

.heading-with-text    {
   -webkit-column-break-inside: avoid;
   -moz-column-break-inside: avoid;
   break-inside: avoid;
}

HTML:

<section class="heading-with-text">
    <h3>Blah, Blah</h3>
        <p>woof, woof</p>
</section>

在OS X平台上,它在Firefox 24.0中根本不起作用。在Safari 6.0.5和Chrome 30.0.1599.66中,它将标题移动到下一列,使其位于文本上方。但是,无论我在段落中添加了多少文本,浏览器都不会在段落中打破。它就像内联块一样工作。我猜他们采取'避免'意味着不惜一切代价避免。这种方法似乎是正确的方法。目前它还没有得到很好的支持。

2 个答案:

答案 0 :(得分:2)

而不是div,将标题及其相应的内容放在section中:

<section>
  <h3>Keep a Heading with the Following Text</h3>
  <p>I’m using the CSS <code>column-count</code> feature…
</section>

而不是display: inline-block,请使用column-break-inside: avoid。这应该提示列拆分算法不要跨列边界拆分内容。

答案 1 :(得分:0)

2019年的

pseudo element hack

html:

<div class="entry-text">

   <h2>Heading</h2>

   <p>paragraph</p>

</div>

css:

    entry-text // .page-template-default pages
   {
       columns: 30rem;
       column-gap: 3rem;
   }

    h2::before
    {
        content:".";
        color: transparent;
        display: table;
        page-break-before: auto;
        page-break-after: avoid;
    }

    h2 + p
    {
        page-break-before: avoid;
    }