Question

我要打印时不分页。

我想打印一个两列的引导页面，并使行，div等跨页面边界。这将使打印的文档的页面更少，但我无法做到这一点。任何建议表示赞赏。

该页面使用bootstrap 4.1.1 css和以下自定义样式：

自定义样式：

body {
  padding-top:54px;
}

@media (min-width:992px) {
  body {
    padding-top:56px;
  }
}

.row { margin-bottom:3px; }

pre,
pre.wrap,
pre.wrap1,
pre.wrap2 {
    white-space:pre-wrap;
    white-space:-moz-pre-wrap;
    white-space:-pre-wrap;
    white-space:-o-pre-wrap;
    word-wrap:break-word;
    overflow-wrap:break-word;
    display:block;
}

@media print {
    @page {
        margin:.75in .375in .5in .2in;
        size:letter !important;
        padding:0;
    }
    * { color:#000 !important; text-shadow:none !important; break-inside:auto !important; background-color:#fff; }
    html, body {
        height:auto;
        margin:0;
        padding:0;
        font-size:10pt;
    }
    h1 { font-size:14pt; }
    h2 { font-size:12pt; }
    pre,
    pre.wrap,
    pre.wrap1,
    pre.wrap2 {
        border:none !important;
        font-size:10pt;
        page-break-inside:auto !important;
        break-inside:auto !important;
    }
    .container {
        width:8.25in;
    }
    .card { border: 1px solid #78a; border-radius:6pt; break-inside:auto !important; }

    .col-sm-6, .col-lg-6 {
        width:3.9in;
        break-inside:auto !important;
        padding:3pt;
    }
    .row { break-inside:auto !important; margin:0; }
}

HTML页面摘录：

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Print test</title>
<link href="css/bootstrap.min.css?v=4.1.1" rel="stylesheet" media="all">
<link href="css/custom.css" rel="stylesheet" media="all">
</head>
<body>
<div class="container">
    <h1 class="my-4">Print test</h1>
    <div class="row">
        <div class="col-lg-6 mb-6">
                <h2 class="my-1 ml-1 pl-3 pb-1 alert-info">column 1</h2>
        </div>
        <div class="col-lg-6 mb-6">
                <h2 class="my-1 ml-1 pl-3 pb-1 alert-info">column 2</h2>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6 mb-6">

            <div class="card h-100">
                <div class="card-body">
                    <pre class="wrap card-text">Lorem ipsum dolor sit amet, enim putent blandit pro cu. Vis ludus scripta dolores et, id has vide mandamus hendrerit. No duis ignota eos, at quidam labitur consequuntur pri, percipit lobortis adversarium ex mea. Homero facilis gubergren quo id, at soleat dicunt concludaturque usu. Posse animal mea ne.

In putent luptatum per, ne eam populo appellantur. Est an tamquam volumus. Sit reque patrioque constituto ne, eam ad altera mollis reprehendunt, tacimates assueverit eu qui. Est id lucilius facilisi consequuntur, cum et vivendum pertinax. Vix ea quem cotidieque, mei ad postea iudicabit comprehensam. Vel ne sale intellegam, offendit officiis eum et, mucius melius vulputate ut mel.</pre>
                </div>
            </div>

        </div>
        <div class="col-lg-6 mb-6">
                <!-- col2 -->
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6 mb-6">
                <!-- col1 -->
        </div>
        <div class="col-lg-6 mb-6">

            <div class="card h-100">
                <div class="card-body">
                    <pre class="wrap card-text">Lorem ipsum dolor sit amet, enim putent blandit pro cu. Vis ludus scripta dolores et, id has vide mandamus hendrerit. No duis ignota eos, at quidam labitur consequuntur pri, percipit lobortis adversarium ex mea. Homero facilis gubergren quo id, at soleat dicunt concludaturque usu. Posse animal mea ne.

In putent luptatum per, ne eam populo appellantur. Est an tamquam volumus. Sit reque patrioque constituto ne, eam ad altera mollis reprehendunt, tacimates assueverit eu qui. Est id lucilius facilisi consequuntur, cum et vivendum pertinax. Vix ea quem cotidieque, mei ad postea iudicabit comprehensam. Vel ne sale intellegam, offendit officiis eum et, mucius melius vulputate ut mel.</pre>
                </div>
            </div>

        </div>
    </div>
</code>

强制没有分页符

0 个答案: