仅在特定列表元素之前打断列

Question

我正在使用 CSS 列将列表分成 3 列。它工作正常，但我无法控制中断的位置。列表中有一些标题，我只想在它们之前中断。有办法吗？

我尝试使用 break-before: avoid。但是没用。

这是我的代码：

ul {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    -moz-column-gap: 1.5rem;
    -webkit-column-gap: 1.5rem;
    column-gap: 1.5rem;
    padding-left: 0;
    list-style: none;
}

ul .title {font-size: 18px; font-weight: bold; margin: 20px 0 10px;}

<ul>
<li class="title">Title</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li class="title">Title</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li class="title">Title</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>

Answer 1

与其尝试避免在标题前换行，不如强制换行。避免部分中断是行不通的，因为从技术上讲，浏览器确实通过在列表中更早的位置插入中断来避免中断。

使用 break-before: column 就可以了。然而！请注意缺少 browser support ；例如，column 可以在 Chrome 中使用，但不能在 Firefox 中使用。

ul {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    -moz-column-gap: 1.5rem;
    -webkit-column-gap: 1.5rem;
    column-gap: 1.5rem;
    padding-left: 0;
    list-style: none;
}

ul .title {
    font-size: 18px;
    font-weight: bold;
    margin: 20px 0 10px;
    break-before: column;
}

<ul>
<li class="title">Title</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li class="title">Title</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li class="title">Title</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>

现在，综上所述，我偷偷怀疑语义上您想要的是三个不同的列表，每个列表都有一个标题，而不是一个巨大的列表。如果是这样，那么您可以通过一些重组和使用 flexbox 来实现 near-full 浏览器支持。

ul {
    padding-left: 0;
    list-style: none;
}

.outer-list {
    display: flex;
}
.outer-list > li {
    flex: 1;
}

ul .title {
    font-size: 18px;
    font-weight: bold;
    margin: 20px 0 10px;
}

<ul class="outer-list">
    <li>
        <h1 class="title">Title</h1>
        <ul>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ul>
    </li>
    <li>
        <h1 class="title">Title</h1>
        <ul>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ul>
    </li>
    <li>
        <h1 class="title">Title</h1>
        <ul>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ul>
    </li>
</ul>

Answer 2

您可以使用以下技术来满足您的要求。

ul {
            padding-left: 0;
            list-style: none;
            width: 100%;
        }

        ul .title {
            font-size: 18px;
            font-weight: bold;
        }

        /* Create three equal columns that floats next to each other */
        .col {
            float: left;
            width: 33.33%;
            padding: 10px;
        }

        /* Clear floats after the columns */
        .row{
            display: inline-flex;
        }
        .row:after {
            content: "";
            display: table;
            /* display: inline-flex; */
            clear: both;
        }

 <ul class="row">
        <div class="col">
            <li class="title">Title</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </div>

        <div class="col">
            <li class="title">Title</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>

        </div>
        <div class="col">
            <li class="title">Title</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>

        </div>
    </ul>

仅在特定列表元素之前打断列

Break columns only before specific list elements

html

css

multiple-columns