Wie verhindere ich Spaltenumbrüche innerhalb von Listenelementen in CSS?

Spaltenumbruch innerhalb eines Elements verhindern

Im Bereich CSS und Responsive Design ist es oft wünschenswert, sicherzustellen, dass bestimmte Elemente innerhalb einer bestimmten Spalte intakt bleiben. Betrachten Sie diese HTML-Struktur, die eine Liste darstellt:

<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>

Nun wenden wir etwas CSS an, um mehrere Spalten zu erstellen:

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

Firefox rendert dies zunächst wie folgt:

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

Wie offensichtlich ist, ist Punkt vier auf die zweite und dritte Spalte aufgeteilt. Um dies zu vermeiden, kommt uns die Break-Inside-CSS-Eigenschaft zu Hilfe:

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

Leider fehlt Firefox derzeit die Unterstützung für diese Eigenschaft. Daher sind alternative Lösungen für Firefox erforderlich. Eine Problemumgehung besteht darin, den geschützten Inhalt in eine Tabelle zu packen, obwohl dies nicht ideal ist.

Aktualisierung:

Firefox 20 unterstützt Seitenumbruch im Inneren : Vermeiden als Mechanismus zur Verhinderung von Spaltenumbrüchen. Der folgende Code zeigt jedoch, dass er für Listen nicht wie erwartet funktioniert:

.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 CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!