Heim >Web-Frontend >CSS-Tutorial >Wie verhindere ich Spaltenumbrüche innerhalb von Listenelementen in CSS?

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

Susan Sarandon
Susan SarandonOriginal
2024-12-19 09:12:10252Durchsuche

How to Prevent Column Breaks Within List Items 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn