Wie verhindere ich Spaltenumbrüche innerhalb von Listenelementen in mehrspaltigen Layouts?

Spaltenumbrüche innerhalb eines Elements verhindern

Bei der Verwendung mehrspaltiger Layouts kommt es häufig zu Problemen mit Spaltenumbrüchen, die Elemente unerwünschterweise aufteilen. Dies kann auftreten, wenn ein Element, beispielsweise ein Listenelement, zu lang ist, um in eine einzelne Spalte zu passen.

Problemstellung

Berücksichtigen Sie das folgende HTML und CSS:

<div class="x">
    <ul>
        <li>Number one</li>
        <li>Number two</li>
        <li>Number three</li>
        <li>Number four is a bit longer</li>
        <li>Number five</li>
    </ul>
</div>

.x {
    -moz-column-count: 3;
    column-count: 3;
    width: 30em;
}

In diesem Szenario können einige Listenelemente zwischen Spalten aufgeteilt sein, wie im Folgenden dargestellt Rendering:

• Number one    • Number three          bit longer
• Number two    • Number four is a    • Number five

Das Ziel besteht darin, diese Aufteilung zu verhindern und ein gewünschteres Rendering zu erreichen, wie zum Beispiel:

• Number one    • Number four is a
• Number two      bit longer
• Number three  • Number five

Lösung: Eigenschaft „break-inside“

Die Lösung für dieses Problem liegt in der Verwendung der CSS-Break-Inside-Eigenschaft. Indem Sie „break-inside:void-column“ für das Element festlegen, dessen Bruch Sie verhindern möchten, können Sie den Browser anweisen, das Element in einer einzelnen Spalte zu belassen.

.x li {
    break-inside: avoid-column;
}

Dieser Ansatz wird von den wichtigsten Browsern weitgehend unterstützt , einschließlich Chrome und Safari. Stand Oktober 2021 fehlt Firefox jedoch immer noch die Unterstützung für die Break-Inside-Eigenschaft.

Firefox-Workaround

Für Firefox gibt es einen Workaround, der die Verwendung einer Tabelle beinhaltet . Von dieser Lösung wird jedoch aufgrund ihrer negativen Auswirkungen dringend abgeraten.

Unterstützung für Seitenumbrüche in Firefox 20

Laut einem Firefox-Fehlerbericht (Bug 549114) , Firefox 20 und spätere Versionen unterstützen jetzt die Verwendung von page-break-inside: Vermeidung, um Spaltenumbrüche innerhalb eines Elements zu verhindern. Wie der folgende Codeausschnitt zeigt, löst diese Methode das Problem für Listen jedoch noch nicht vollständig:

.x {
    column-count: 3;
    width: 30em;
}

.x ul {
    margin: 0;
}

.x li {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside:avoid;
    -moz-page-break-inside:avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}

<div class="x">
    <ul>
        <li>Number one, one, one, one, one</li>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
        <li>Number three</li>
    </ul>
</div>

Das obige ist der detaillierte Inhalt vonWie verhindere ich Spaltenumbrüche innerhalb von Listenelementen in mehrspaltigen Layouts?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!