HTML CSS 打印 出现了截留一行的问题

Question

用css控制打印出现了如下截留了一行内容的问题：

代码如下：

<div className="b-print-demo clearfix">
    <div className="b-print-demo-opt hidden-print">
        <button className="btn btn-default" onClick={this.handlePrint}>打印</button>
    </div>
    <div className="b-print-demo-p-wrap">
        <p className="b-print-demo-p gm-border gm-padding5">
            这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文
        </p>
    </div>
    <div className="b-print-demo-p-wrap">
        <p className="b-print-demo-p gm-border gm-padding5">
            这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文
        </p>
    </div>
    ...
</div>

less如下：

.b-print-demo {
    display: block;
    font-size: 20px;
    margin: 10px;
    &-p {
        margin-bottom: 10px;
        border-color: black;
    }
}

@media print {
    .b-print-demo-p {
        font-size: 20pt;
        &-wrap {
            page-break-inside: avoid !important;
            orphans: 2;
            widows: 2;
        }
    }
}

google了许久，发现和一个orphans的属性有关，但是测试无果，求搭救

Answer 1

你html中className是什么？ 这个html是某种模板吗？className会被替换成class吗？ 原生html支持之class啊

Answer 2

您好！请问您的问题解决了吗？您又是如何解决的呢？