Wie kann verhindert werden, dass Listenelemente in mehrspaltigen Layouts spaltenübergreifend aufgeteilt werden?

Spaltenumbrüche innerhalb von Elementen verhindern

In einem mehrspaltigen Layout kann es vorkommen, dass einzelne Listenelemente spaltenübergreifend umbrochen werden. Um dieses unerwünschte Verhalten zu verhindern, kann die CSS-Eigenschaft „break-inside“ verwendet werden.

Verwendung von „break-inside“

Insbesondere wird dies durch die Einstellung von „break-inside:void-column“ für die Listenelementelemente sichergestellt Sie bleiben in einer einzigen Spalte erhalten:

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

Firefox-Kompatibilität Probleme

Leider unterstützt Firefox seit Oktober 2021 die Break-Inside-Eigenschaft nicht mehr. Während Sie es in anderen gängigen Browsern verwenden können, benötigen Sie eine Problemumgehung für Firefox.

Problemumgehung für Firefox

Eine weniger wünschenswerte Lösung für Firefox besteht darin, geschützte Inhalte in eine Tabelle einzuschließen:

<div class="x">
    <table>
        <tr><td>Number one</td></tr>
        <tr><td>Number two (longer)</td></tr>
        <tr><td>Number three</td></tr>
    </table>
</div>

Firefox 20-Unterstützung (teilweise)

Firefox 20 hat Unterstützung eingeführt für page-break-inside: vermeiden, löst das Problem mit Listen jedoch nicht vollständig. Der folgende Code zeigt, dass weiterhin Elemente beschädigt werden:

.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 kann verhindert werden, dass Listenelemente in mehrspaltigen Layouts spaltenübergreifend aufgeteilt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!