Avoid page break between dt and dd elements

Question

I've got many <dd> and <dt> elements on a page in this exact order. For example:

<dt>
  "Some random text here"
</dt>
<dd>
  <input type="text">
  <span></span>
</dd>

This pattern repeats very often on a page. In the case a user would like to print the page, I would like to prevent page breaks between <dd> and <dt> element. They should always be together.

Is there any way how to do that? Applying css property: page-break-after:avoid on a <dt> element or page-break-before:avoid on a <dd> element does not seem to work.

Thanks for help

Show us some actual code that doesn't work... e.g. did you know if you don't put text between some elements page-break may not work? CSS2 or CSS3? Putting them in a table may also stop page-break working. — Paul Zahra, Dec 22 '15 at 09:00
Question updated. Elements are not a part of a table. CSS3. Just to mention that page-break-inside:avoid works perfectly so it prevents input field from being split on a page break — user2151486, Dec 22 '15 at 09:07
So what's the problem with using page-break-inside on the dl ? — Paul Zahra, Dec 22 '15 at 09:21
You will need all of these on your `dt` -- `-webkit-page-break-after: avoid; page-break-after: avoid; break-after: avoid-page;` — Abhitalks, Dec 22 '15 at 09:27
Using page-break-inside on the dl didn't work too. In addition, it made an unwanted page break after the previous div sibling element — user2151486, Dec 22 '15 at 09:28
Looks like Chrome doesn't recognize `-webkit-page-break-after: avoid` — user2151486, Dec 22 '15 at 09:32
According to this thread http://stackoverflow.com/questions/7706504/page-break-inside-doesnt-work-in-chrome it seems that Chrome supports only mentioned `page-break-inside` — user2151486, Dec 22 '15 at 10:02
There seems to be a bug with webkit -- https://bugs.webkit.org/show_bug.cgi?id=5097 — Abhitalks, Dec 22 '15 at 10:04
To keep dd and dt elements together try the following... the + means it only applies to dd elements that immediately follow a dt element: dt + dd { page-break-before: avoid } // It will style ONLY the first dd after a dt — Paul Zahra, Dec 22 '15 at 10:12
Good approach. Unfortunately, according to http://caniuse.com/#search=break-before it looks like no actual browser supports `avoid` for `page-break-before` & `page-break-after` (only `page-break-inside`). — user2151486, Dec 22 '15 at 11:04
@user2151486 Good spot... well that's pants... as i said somewhere it seems you will have to wait for the newer break-pagexxxxxxx to be incorporated into browsers (new spec). — Paul Zahra, Dec 22 '15 at 16:25

score 0 · Answer 1 · answered Dec 24 '15 at 13:01

I am not an expert in this but I found a workaround:

Create an ID and add the page-break-before there:

#break {
    page-break-before:left;
}

Now simply add the ID where you want the page break to be:

<dt>Test</dt>
    <dd>Lorem ipsum dolor sit amet.</dd>
    <dd>Lorem ipsum dolor sit amet</dd>
<dt>Test</dt>
    <dd>Lorem ipsum dolor sit amet.</dd>
    <dd>Lorem ipsum dolor sit amet</dd>
<dt id="break">Test</dt>
    <dd>Lorem ipsum dolor sit amet.</dd>
    <dd>Lorem ipsum dolor sit amet</dd>
<dt>Test</dt>
    <dd>Lorem ipsum dolor sit amet.</dd>
    <dd>Lorem ipsum dolor sit amet</dd>
<dt id="break">Test</dt>
    <dd>Lorem ipsum dolor sit amet.</dd>
    <dd>Lorem ipsum dolor sit amet</dd>

This is the best solution I found so far, I don't know if it is possible to do it automatically.

Hope this helps.

Regards

Avoid page break between dt and dd elements

1 Answers1