Вопросы Теги

Не допускать, чтобы элемент HTML занимал несколько страниц при печати

У меня есть следующий HTML-код, который я бы хотел, чтобы он не разбивался при охвате нескольких страниц. Проблема в том, что если я использую разрыв страницы до или после, он поместит каждый элемент на свою страницу. Другая проблема, с которой я столкнулся, заключается в том, что если я установил display: block либо в классе CSS , , либо в классе wrap , DIV или LI все равно будут распалась. У меня есть файл CSS для печатных СМИ и файл CSS для экрана. Я хочу, чтобы элемент

  • и его содержимое не разбивались. 

            <div class="pad">
        <h1 style="text-align: center; margin: 10px 0">

            Work Orders for Jan 05, 2011
        </h1>
        <p class="printHidden">
            <a href="/orders/print-all/date/2011-01-05">Print All Work Orders</a>
        </p>
        <ul class="workorders">                    
            <li class="cell">
                <div class="wrap" id="146">

                    <div class="scheduled">
                        <p>
                            <strong>Work Order:</strong> <a href="/orders/view/work-order/146">158801</a>
                        </p>
                        <p>
                            <strong>Client:</strong> Client Name
                        </p><br>

                        <b>Resources</b>
                        <ul>
                            <li>
                                <a href="/resources/view/resource-id/5" id="Person-5">Mikell McLaindon</a>
                            </li>
                            <li>
                                <a href="/resources/view/resource-id/9" id="Person-9">Jose Copper</a>

                            </li>
                        </ul>
                    </div>
                    <div class="unschedule printHidden">
                        <h1 style="text-align: center; margin: 10px 0 10px; font-size: 12px; font-weight: bold;">
                            Unschedule Resource for 15880-PW
                        </h1>
                    </div>
                </div>
            </li>
            {... removed for brevity ...}
    • 20
    задан MatthewMartin 17 December 2015 в 22:27
    поделиться