打印段落时防止分页答案

【问题标题】：prevent page-break when printing paragraph打印段落时防止分页
【发布时间】：2022-10-05 15:27:52
【问题描述】：

我想打印一页。但是我注意到，当一个段落在打印时包含更多文本时，它可能会中断并打印在下一页上。我想避免这种情况，但它不起作用，可能是由于 html 结构：

<div class=\"row form-group\">
<div class=\"col-sm-12\">
<label><span>Explanation expiration passed</span></label>
<p class=\"fake-form-control-disabled\">some very large ipsum lorem text ....</p>
</div>
</div>

对于 form-group 类，我有以下 cdd 定义：

.form-group {
        display: block;
        break-inside: avoid;
        margin-bottom: 15px;  
    }

当我不使用 Bootstrap css 网格时，它似乎可以工作，例如：

<div class=\"form-group\">  
<label><span>Explanation expiration passed</span></label>
<p class=\"fake-form-control-disabled\">some very large ipsum lorem text ....</p>
</div>

我应该怎么做？

标签： css twitter-bootstrap-3 page-break-inside

【解决方案1】：

我建议在最后一个子块级别上使用break-inside 属性，在您的情况下，这是<p> 级别，例如。

p {
    display: block;
    break-inside: avoid;
    margin-bottom: 15px;
}

或者，将您的 form-group 类附加到引导网格的列级别，例如：<div class="col-sm-12 form-group">

【讨论】：