HTML 如果使用 bootstrap，则预标记打印额外的行

Question

我在使用 bootstrap 打印记录数超过 53 的预标记时遇到困难，并且在打印预览中总是出现空白页。但是，如果记录小于52，那么我可以打印成功。请在下面查看我的代码。

<html ng-app="appMain">
<head>
    <script src="lib/angular.js"></script>
    <script src="lib/moment.js"></script>
    <script src="js/app.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css?v3.3">
</head>
<body>
    <div ng-controller='ctrlMain'>            
        <table>
            <tr>                
                <td><button ng-click="fnPrintXMLData()"> Print </button></td>
            </tr>
        <table>
        <label>test label</label>
        <div class="clearfix">&nbsp;</div>                           
        <span ng-show="message.id"><h4>Detail Message</h4></span>
        <div class="clearfix">&nbsp;</div>
        <pre class="printDisplayBox" style="white-space: pre-wrap; word-break: normal;">
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        32
        33
        34
        35
        36
        37
        38
        39
        40
        41
        42
        43
        44
        45
        46
        47
        48
        49
        50
        51
        52
        53
        54
        55
        </pre>
    </div>
</body>

并在控制器中

appMain.controller('ctrlMain', ['$scope', function($scope) {
$scope.fnPrintXMLData = function() {
    window.print();
};}]);

打印出来的结果是这样的： Printing with bootstrap 如果我注释掉“”或者记录数小于52，那么结果就可以了，就是 Printing without bootstrap

谁能帮我解决这个问题？非常感谢。

Answer 1

你的html:

<pre class="printDisplayBox" style="white-space: pre-wrap;word-break: normal;width: 100%;display: -webkit-inline-box !important;">

HTML 如果使用 bootstrap，则预标记打印额外的行

HTML pre tag printing extra line if bootstrap is used

html

pre

angular-ui-bootstrap