Question

问题：对于显示为表格的无序列表，是否有任何特定的中断规则？

问题：我可以阻止最后一行脱离第二行，但是使用相同的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：

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来显示表...

Answer 1

问题中的CSS错过了“li.wrapperoutside”和“li.wrapperinside”之间未分类UL的声明：

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

使用这个附加声明，生成的表会因为它应该中断而中断：如果列/页中没有更多空格，则生成的表会在另一列/页上中断。它不会在第一行和第二行以及最后一行和倒数第二行之间中断。

Answer 2

使用:first-of-type和:last-of-type伪类：

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和https://www.w3.org/TR/selectors-3/#last-of-type-pseudo

仅限CSS - 显示为表

2 个答案: