und break-after nicht

Question

Arbeits Ich habe eine Liste von Titeln und Definitionen:

<dl> 
<dt>Item 1</dt> 
<dd>Nulla at neque blandit, pretium sapien vitae, ornare neque.</dd> 
<dt>Item 2</dt> 
<dd>Quisque fermentum augue nec rutrum suscipit.</dd> 
<dt>Item 3</dt> 
<dd>Sed facilisis eros ac lorem bibendum, id tristique ipsum rhoncus.</dd> 
<dt>Item 4</dt> 
<dd>Duis scelerisque risus sit amet metus placerat volutpat.</dd> 
<dt>Item 5</dt> 
<dd>Duis tristique erat at leo lacinia, nec fringilla risus rhoncus.</dd> 
<dt>Item 6</dt> 
<dd>Cras rutrum eros dictum nulla tempus, in consequat tellus dignissim.</dd> 
<dt>Item 7</dt> 
<dd>Maecenas et erat vitae metus euismod luctus.</dd> 

Wenn der Browser breit genug ist, würde Ich mag dieses Layout in einer mehrspaltigen präsentieren. Ich bin in der Lage, das zu tun, aber ich würde Spaltenumbrüche nur nach s und niemals in der Mitte von s und s oder nach s machen wollen.

Im Moment bin ich mit:

dl{column-count:2} 
dt,dd{break-inside:avoid;column-break-inside:avoid;-webkit-column-break-inside:avoid} 
dt{break-after:never;column-break-after:never;-webkit-column-break-after:never} 

Mindestens in Chrom dies keine Wirkung zu haben scheint.

Answer 1

Sie müssen dt und dd in ein Div setzen. Außerdem müssen Sie auch für dieses div verwenden. Beachten Sie, dass Sie auch andere Deklarationen für Kompatibilität mit Browsern verwenden müssen. Zum Beispiel müssen Sie page-break-inside für Firefox hinzufügen. Weitere Beispiele finden Sie unter here. Siehe auch das Snippet.

Ich hoffe, dass ich irgendeine Hilfe war.

dl { 
 
    column-count: 2 
 
} 
 

 
dt, 
 
dd, 
 
.all { 
 
    break-inside: avoid; 
 
    page-break-inside: avoid; 
 
    -webkit-column-break-inside: avoid 
 
} 
 

 
dt { 
 
    break-after: never; 
 
    column-break-after: never; 
 
    -webkit-column-break-after: never 
 
}

<dl> 
 
    <div class="all"> 
 
    <dt>Item 1</dt> 
 
    <dd>Nulla at neque blandit, pretium sapien vitae, ornare neque.</dd> 
 
    </div> 
 
    <div class="all"> 
 
    <dt>Item 2</dt> 
 
    <dd>Quisque fermentum augue nec rutrum suscipit.</dd> 
 
    </div> 
 
    <div class="all"> 
 
    <dt>Item 3</dt> 
 
    <dd>Sed facilisis eros ac lorem bibendum, id tristique ipsum rhoncus.</dd> 
 
    </div> 
 
    <div class="all"> 
 
    <dt>Item 4</dt> 
 
    <dd>Duis scelerisque risus sit amet metus placerat volutpat.</dd> 
 
    </div> 
 
    <div class="all"> 
 
    <dt>Item 5</dt> 
 
    <dd>Duis tristique erat at leo lacinia, nec fringilla risus rhoncus.</dd> 
 
    </div> 
 
    <div class="all"> 
 
    <dt>Item 6</dt> 
 
    <dd>Cras rutrum eros dictum nulla tempus, in consequat tellus dignissim.</dd> 
 
    </div> 
 
    <div class="all"> 
 
    <dt>Item 7</dt> 
 
    <dd>Maecenas et erat vitae metus euismod luctus.</dd> 
 
    </div> 
 
</dl>