Prevent the occurrence of a page break in between dt and dd elements

There are multiple instances of <dd> and <dt> elements in a specific order on this page. For instance:

<dt>
  "Here is some random text"
</dt>
<dd>
  <input type="text">
  <span></span>
</dd>

This structure occurs frequently throughout the page. When a user attempts to print the page, I want to ensure that there are no page breaks between the <dd> and <dt> elements. They should always be kept together.

Is there a way to achieve this? Applying the CSS properties: page-break-after:avoid on the <dt> element or page-break-before:avoid on the <dd> element does not appear to work.

Thank you for your assistance.

htmlcss

Answer №1

Although I'm not an expert in this field, I managed to come up with a workaround:

First, create an ID and specify the page break before it:

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

Then, simply use the ID where you want the page break to occur:

<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 method has proven to be effective for me. However, I am unsure if there is an automated way to achieve the same result.

I hope you find this information helpful.

Best regards

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the image size to match the height of its parent element and ensure it stays resized when the window is

Looking for some assistance with my code. Here's an example of what I'm working on - http://jsfiddle.net/urK7t/ You can also view the full-size page here - In terms of the concept: I am trying to create a DIV element that has 100% width and h ...

javascriptjqueryhtmlcss

When consecutive DOM elements are hidden, a message saying "Hiding N elements" will be displayed

Provided a set of elements (number unknown) where some elements should remain hidden: <div id="root"> <div> 1</div> <div class="hide"> 2</div> <div class="hide"> 3</div> <div class="hide"&g ...

javascriptcss

Is there a way to use jQuery to efficiently refresh all values within a table?

Whenever I click the "Update All" button, I want all the CHANTIERS values in each line of the list of SALARIES to be checked and updated according to the value selected in the dropdown list. For example, if I choose the value 1 in the dropdown list and cli ...

jqueryhtml

Adjusting the transparency of TabBadge in Ionic 2

I am currently working on a project that involves tabs, and I'm looking to update the style of the badge when the value is 0. Unfortunately, I am unsure how to dynamically change the style of my tabs or adjust the opacity of the badge in the style. M ...

cssangulartypescriptsassionic2

I am having difficulty organizing my text into two grid columns and aligning it in the center

.hero { display: grid; grid-template-columns: repeat(2, 33.45rem); grid-template-rows: 12.5rem; border-bottom: .05em solid #05d31f; width: 69.8rem; height: 16.5rem; } .hero-title { grid-row-start: 1; grid-column-start: 1; } .hero-title h ...

htmlcssreactjs

How can you provide unique css box shadows for various browsers without relying on browser detection?

I have observed that each browser displays box shadow blur radius a bit differently, so I want to ensure consistency across all browsers. However, since they use the unprefixed version, I need to provide different stylesheets for each browser. What is the ...

javascriptcsshtmlstylesheetbrowser-detection

Can you identify the origin of the inclusion of a .php file?

Is there a way to automatically determine if a PHP script is being accessed directly as an HTML page, used as a JavaScript file, or utilized as a CSS Stylesheet? I'm looking for a solution that doesn't involve GET variables or setting a flag wit ...

phpjavascriptcssincludeheader

Strange CSS/browser storage glitch

UPDATE: JUST REALIZED THIS ISSUE IS ONLY OCCURRING ON FIREFOX, NOT CHROME ANOTHER UPDATE: Oddly enough, this problem only occurs locally. When I push it to GitHub, everything works fine. So strange. I suppose that means it's not a major issue. On my ...

javascriptcssgoogle-chromefirefox

Switch between Light and Dark Modes effortlessly with just one button

I've created a code that effortlessly switches between light mode and dark mode with the press of buttons. However, I'm looking to combine these two functionalities into a single toggle button for ease of use. If anyone can provide insight on how ...

javascripthtml

Unable to pick out particular elements from the information stored in <?!=JSON.stringify(dataFromServerTemplate) ?>

I am facing an issue with the JSON format. Being new to this, I am struggling to identify the root of the problem. In my Google App Script, I have a doGet function that looks like this: function doGet() { var htmlTemplate = HtmlService.createTemplateF ...

javascriptjsonhtmlgoogle-apps-script

Is there a way to create an HTML select element where each option has a unique background color, and will display properly

I want to create multiple HTML select elements with unique background colors for each option: <select runat="server" id="select"> <option value="A">White</option> <option value="B">Red</option> <option value="C">Yellow& ...

javascriptjqueryhtmlcssselect

Incorporate h:outputText into your JavaScript code segment

After populating some information into a h:outputText, I am now looking to trigger a JavaScript function upon clicking a button that will retrieve the text from the outputText. The structure of the code is as follows: <p:tabView id="tabView"> & ...

javascripthtmlajaxjsf

Is it not possible to change node labels in D3.js after clicking on a node?

After being inspired by this link, I successfully created a basic network visualization app using D3.js. The app reads node names from a textarea on an HTML page and then constructs a network where all nodes are interconnected. All the relevant code can ...

javascripthtmlcssd3.js

Experiencing difficulties with retrieving form data in req.body using Express and node.js

I am facing an issue while trying to create a registration form for new users with profile picture upload. Despite adding body-parser middleware, the form data is not passing correctly to the route and I cannot identify the reason behind it. Error: D:&bso ...

javascripthtmlnode.jsexpress

Incorporating a line break within a string in specific situations

I am currently working on an older Sitefinity website that features a range of cut glass options on select product pages. These options are displayed as thumbnail images that can be clicked to open a popup window. The current code is structured to generate ...

c#htmlline-breakssitefinity

Transferring data from local storage to a PHP server using AJAX

My attempt to transfer data from local storage to PHP using AJAX resulted in an error mentioning 'undefined index data'. chart.php <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="t ...

javascriptphpjqueryajaxhtml

Creating a Sleek Horizontal Scroll Functionality for Multiple Rows with Bootstrap 5

The container allows scrolling for only half of its content. Afterwards, scrolling affects the navigation panel as well. CSS: .horizontal-scrollable { overflow-x: auto; white-space: nowrap; } HTML: <div class="container hori ...

cssbootstrap-4flexboxbootstrap-5bootstrap-grid

Troubleshooting Problem with Creating a Button using HTML Checkbox "onclick" Event

My main goal with the checkbox click event is to achieve the following objectives: 1] Create a button with the id = 'id-of-checkbox'+'some-character-here' in a specific div. 2] Clicking on that button will remove both the button and ...

javascripthtmlcheckbox

What could be the reason for the absence of margin on the top and bottom

.separator { border: 1px solid #000000; margin: 10px; } <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>Separator</title> </head> <body> &l ...

htmlcss

Ways to animate elements while scrolling in React.js?

I am new to using React.JS and currently working on setting up an E-commerce Store. My goal is to have 5 images stack on top of each other and move together as the user scrolls. I used to achieve this effect in Vanilla JavaScript by adding a window.addEven ...

cssreactjsanimationscroll