Сохранить заголовок со следующим текстом

Question

Я использую функцию подсчета столбцов css, чтобы разбить мой раздел на два столбца. На одной странице у меня есть заголовок h3 внизу первого столбца и следующий параграф p вверху следующего. Я хотел бы сохранить заголовок с первыми несколькими предложениями абзаца. Я могу сохранить его во всем абзаце, обернув оба в div, стилизованный inline-block. Это будет работать с короткими параграфами, но не с длинными. Я также мог бы произвольно разбить абзац, но мне, возможно, придется собрать его вместе, если дополнительный контент был добавлен до того, как заголовок перенес его в следующий столбец. Я не удивлюсь, если это невозможно, так как количество столбцов является новым.

ОБНОВИТЬ

Основываясь на предложении @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 заголовок перемещался к следующему столбцу, чтобы он находился над текстом. Однако, независимо от того, сколько текста я добавил в абзац, браузеры не ставят разрыв в абзаце. Он работал так же, как встроенный блок. Я предполагаю, что они взяли "избегать", чтобы означать избежать любой ценой. Этот подход кажется правильным. Это просто не очень хорошо поддерживается в настоящее время.

Answer 1

Взлом псевдоэлемента в 2019 вздох

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;
    }

Answer 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, Это должно указывать алгоритму разбиения на столбцы, чтобы не разбивать содержимое по границам столбца.

Answer 3

Я тоже искал решение этой проблемы. Мне потребовалось некоторое время, чтобы найти правильное свойство css, но я решил это с помощьюbreak-after: avoidсейчас.

      h2 {   
    -webkit-break-after: avoid;
    break-after: avoid;
}