仅限 CSS - UL/LI 的违规规则显示为 table

Question

问题：对于显示为table的无序列表，有没有具体的断行规则？

问题：我可以防止最后一行脱离倒数第二行，但是使用相同的CSS规则我不能阻止第二行脱离第一行。

我有以下 HTML 结构：

<ul>
    <li class="wrapperoutside">
        <ul>
            <li class="wrapperinside">
                <p>Heading1</p>
                <p>Heading2</p>
            </li>
            <li class="wrapperinside">
                <p>Part name 1</p>
                <p>Part name 1</p>
            </li>
            <li class="wrapperinside">
                <p>Part name 2</p>
                <p>Part name 2</p>
            </li>
            <li class="wrapperinside">
                <p>Part name 3</p>
                <p>Part name 3</p>
            </li>
            <li class="wrapperinside">
                <p>Part name 4</p>
                <p>Part name 4</p>
            </li>
            <li class="wrapperinside">
                <p>Part name 5</p>
                <p>Part name 5</p>
            </li>
       </ul>
    </li>
</ul>

这是我 CSS 创建的 table:

li.wrapperoutside {
    display:table;
}

li.wrapperoutside li.wrapperinside {
    display: table-row;
}

li.wrapperoutside li.wrapperinside p {
    display: table-cell;
}

由于这是作为 PDF 输出发布的（使用 Antenna House 作为格式化程序），我必须关心一些排版问题，例如防止最后一行脱离倒数第二行。它适用于：

li.wrapperoutside li.wrapperinside:last-child {
    page-break-before: avoid!important;
}

反过来事情开始变得奇怪：防止第二行脱离第一行：

li.wrapperoutside li.wrapperinside:first-child {
    page-break-after: avoid!important;
}

没用。相反，整个无序列表不再中断。我尝试了不同的选择器：

li.wrapperoutside li.wrapperinside:nth-child(2) {
    page-break-before: avoid!important;
}

或

li.wrapperinside:nth-child(1) + li.wrapperinside:nth-child(2) {
    page-break-after: avoid!important;
}

我尝试了各种选择器方法来使用分页规则，但它对第一行不起作用。由于违反规则在最后一行使用相同的 CSS 规则，这对我来说很奇怪。

关于嵌套的背景 HTML：我正在使用内容管理系统，无法影响 UL 的 HTML 类。我只能影响LI的类，所以我用LI来显示table...

Answer 1

问题中的CSS漏了"li.wrapperoutside"和"li.wrapperinside"之间未分类UL的声明：

ul li.wrapperoutside ul {
    display:table-row-group;
}

有了这个额外的声明，生成的 table 就会中断：如果 column/page 中没有更多的 space，生成的 table 会中断另一个 column/page。它不会在第一行和第二行以及最后一行和倒数第二行之间中断。

Answer 2

使用 :first-of-type 和 :last-of-type pseudo-classes:

li.wrapperinside:first-of-type {
    page-break-after: avoid;
}
li.wrapperinside:last-of-type {
    page-break-before: avoid;
}

见https://www.antennahouse.com/product/ahf65/ahf-css6.html#css3-pseudo-clssses, https://www.w3.org/TR/selectors-3/#first-of-type-pseudo, and https://www.w3.org/TR/selectors-3/#last-of-type-pseudo

仅限 CSS - UL/LI 的违规规则显示为 table

CSS only - Breaking rules for UL/LI displayed as table

html

css

pdf

page-break