Forum How do I...?

How do I keep the title of a note to keep breaking across the page?

In some cases, the title of the note (i.e. "(i) Note") gets left on one page and the body of the note gets placed on the next.

This is the fairly standard Jekyll include I'm using for notes. The bit that gets left behind is <b>Note</b> but I can't simply append it to the included content because the note title will change depending on whether this is a Tip, Note, Important, Caution, etc.

<div markdown="span" class="alert alert-info" role="alert"><i class="fa fa-info-circle"></i> <b>Note</b><br> {{include.content}}</div>

I've tried to attach a class to the tag that contains "Note" but I'm not certain what the best way is to keep it together with whatever gets generated from {{include.content}}.
Placing the title in a block and applying "break-after: avoid" would be one way, or applying "break-inside: avoid" to the entire note.
Hm. First, I've tried putting the note title in a <span> and telling it to be a block element, in the include...

<div markdown="span" class="alert alert-info" role="alert"><span class="alert-title"><span class="fa fa-info-circle"></span> <strong>Note</strong></span><br> {{include.content}}</div>

...and in the corresponding CSS:

@media print {
  .alert-title { display: block; margin-bottom: -10px; break-after: avoid; }

This didn't seem to do anything. However, your second suggestion did do the trick! :)

@media print {
  .alert { break-inside: avoid; }