How to prevent dt from splitting in html description list?

Asked Jan 23 '20 at 15:36

Active Jan 23 '20 at 16:51

Viewed 46 times

I am working on HTML description list to show dd and dt something like this.

But it is showing up something like below splitting the dt which is not desired behvaiour;

I am using following CSS.

.wrapper dl {
  margin: 0 -10px;
  padding: 0;
  column-count: 2;
}

.wrapper dt {
  vertical-align: top;
  width: calc(33.333333% - 20px);
  margin: 0 10px 20px 10px;
  background: lightgrey;
}

<div class="wrapper">
  <dl>

    <dd>One</dd>
    <dt>We can use CSS Grid to overwrite older methods.</dt>

    <dd>Two</dd>
    <dt>We can use CSS Grid to overwrite older methods.</dt>

    <dd>Three</dd>
    <dt>We can use CSS Grid to overwrite older methods.</dt>

    <dd>Four</dd>
    <dt>We can use CSS Grid to overwrite older methodsssdfsdf sdfsdf sdf sdfsdfsdsdf.</dt>

    <dd>Five</dd>
    <dt>We can use CSS Grid to overwrite older methods.</dt>

    <dd>Six</dd>
    <dt>We can use CSS Grid to overwrite older methods.</dt>

    <dd>Seven</dd>
    <dt>We can use CSS Grid to overwrite older methods.</dt>
    </ul>
</div>

What changes I need to do ?

edited Jan 23 '20 at 16:51

Heretic Monkey

11,687
7
53
122

asked Jan 23 '20 at 15:36

touseefkhan4pk

1

What is your HTML? – ecg8 Jan 23 '20 at 15:47
`page-break-inside:avoid;` – Mr Lister Jan 23 '20 at 16:45
@MrLister Does that work on the screen? – Heretic Monkey Jan 23 '20 at 16:50
Yes, so `page-break-inside` for Firefox and `break-inside` for other browsers. @HereticMonkey You are right that "page-break-inside" sounds like it works only on paper, and that is why they renamed it. – Mr Lister Jan 23 '20 at 17:25

How to prevent dt from splitting in html description list?

0 Answers0