Wie kann verhindert werden, dass Inhalte über CSS-Spalten verteilt werden?

So verhindern Sie Spaltenumbrüche innerhalb eines Elements: Eine umfassende Anleitung

Problem:
Im Webdesign, wenn Inhalte mit formatiert werden Bei Verwendung von CSS-Spalten ist es möglich, dass der Inhalt zwischen den Spalten umbrochen wird, was zu einem optisch unerwünschten Effekt führt. Beispielsweise kann eine Liste über mehrere Spalten aufgeteilt werden, wodurch ihre Kontinuität unterbrochen wird.

Lösung:
Um diesen unerwünschten Bruch zu verhindern, kann die CSS-Eigenschaft „break-inside“ verwendet werden. Durch die Einstellung „Spalte vermeiden“ wird der Browser angewiesen, den Inhalt wann immer möglich in derselben Spalte zu belassen.

Beispiel:
Um Zeilenumbrüche innerhalb von Listenelementen in einem Multi- Spaltenlayout:

.list-container {
    column-count: 3;
}

.list-container li {
    break-inside: avoid-column;
}

Browser-Unterstützung:
Leider Seit Oktober 2021 unterstützt Firefox break-inside:void-column nicht vollständig. Diese Eigenschaft wird jedoch von allen gängigen Browsern außer Firefox unterstützt.

Workaround für Firefox:
Für Firefox kann ein Workaround verwendet werden, um Spaltenumbrüche innerhalb von Listenelementen zu verhindern: Umbrechen der Inhalt in einer Tabelle.

<div class="container">
    <table>
        <tbody>
            <tr>
                <th>Number</th>
                <th>Description</th>
            </tr>
            <tr>
                <td>1</td>
                <td>Number one, one, one, one, one</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Number two, two, two, two, two, two, two, two, two, two, two, two</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Number three</td>
            </tr>
        </tbody>
    </table>
</div>

.container {
    column-count: 3;
}

Hinweis: Diese Problemumgehung ist nicht ideal, da sie zu Problemen führen kann zusätzliche Markup- und Styling-Komplexität.

Update:
Neueste Updates für Firefox 20 haben Unterstützung für Page-Break-Inside: Vermeiden eingeführt, aber das Problem ist dadurch noch nicht vollständig gelöst Verhindern von Spaltenumbrüchen in Listen. Eine kontinuierliche Überwachung der Webbrowser-Entwicklung wird empfohlen.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass Inhalte über CSS-Spalten verteilt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!