Ngắt sau css

Giờ đây, bạn có thể đặt tùy chọn hiển thị hướng dẫn dọc và chọn thời điểm hiển thị hướng dẫn trực quan - Tự động hiển thị hướng dẫn, Luôn hiển thị hướng dẫn và Không bao giờ hiển thị hướng dẫn. Theo mặc định, Lưới được đặt thành Luôn hiển thị hướng dẫn

Bạn cũng có khả năng thay đổi Màu sắc và Độ mờ của hướng dẫn trực quan và lượng dòng tạo nên hướng dẫn. Tùy chọn Mật độ đặt số lượng đường xuất hiện giữa mỗi đường Split Warp. Theo mặc định, Mật độ được đặt thành 2

Lưu ý. khi sử dụng ngắt trang sau. luôn luôn cho thẻ, nó sẽ tạo ngắt trang sau bit cuối cùng của bảng, tạo ra một trang hoàn toàn trống ở cuối mỗi lần. Để sửa lỗi này, chỉ cần thay đổi nó thành ngắt trang sau. Tự động. Nó sẽ phá vỡ chính xác và không tạo thêm một trang trống.
<html>
<head>
<style>
@media print
{
  table { page-break-after:auto }
  tr    { page-break-inside:avoid; page-break-after:auto }
  td    { page-break-inside:avoid; page-break-after:auto }
  thead { display:table-header-group }
  tfoot { display:table-footer-group }
}
</style>
</head>

<body>
....
</body>
</html>

40 hữu ích 2 bình luận chia sẻ

câu trả lời

19

Ngắt sau css

Chiều rộng mở từ Sinan Ünür

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
    table { page-break-inside:auto }
    div   { page-break-inside:avoid; } /* This is the key */
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
</head>
<body>
    <table>
        <thead>
            <tr><th>heading</th></tr>
        </thead>
        <tfoot>
            <tr><td>notes</td></tr>
        </tfoot>
        <tr>
            <td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
        </tr>
        <tr>
            <td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
        </tr>
        <!-- 500 more rows -->
        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

Like as

p.breakAfter {
    page-break-after: always;
}
1 trong một số trình duyệt chỉ được xem xét cho các thành phần khối, không phải cho ô, bảng, hàng không

If you try to

p.breakAfter {
    page-break-after: always;
}
2 các
p.breakAfter {
    page-break-after: always;
}
3 the.
p.breakAfter {
    page-break-after: always;
}
1 , it active, but messes xung quanh với cách sắp xếp bảng

19 hữu ích 2 bình luận chia sẻ

câu trả lời

9

Không có câu trả lời nào ở đây đang làm việc cho tôi trong Chrome. AAverin trên GitHub đã tạo ra một số Javascript hữu ích cho mục đích điều này và điều này có hiệu quả với tôi.

Chỉ cần thêm js vào mã của bạn và thêm lớp 'splitForPrint' vào bảng của bạn và nó sẽ chia bảng thu gọn chào thành nhiều trang và thêm bảng tiêu đề vào mỗi trang

9 hữu ích 5 bình luận chia sẻ

câu trả lời

6

Sử dụng các thuộc tính CSS này

page-break-after

page-break-before 

Ví dụ

<html>
<head></head>
<body>
<p>HỌC WEB CHUẨN</p>
<p class="breakAfter">HỌC WEB CHUẨN</p>
</body>
</html>
0

thông qua

6 hữu ích 5 bình luận chia sẻ

câu trả lời

4

Gần đây tôi đã giải quyết vấn đề này bằng một giải pháp tốt

CSS.

<html>
<head></head>
<body>
<p>HỌC WEB CHUẨN</p>
<p class="breakAfter">HỌC WEB CHUẨN</p>
</body>
</html>
1

JS.

<html>
<head></head>
<body>
<p>HỌC WEB CHUẨN</p>
<p class="breakAfter">HỌC WEB CHUẨN</p>
</body>
</html>
2

Hoạt động như một chiếc lá bùa

4 hữu ích 0 bình luận chia sẻ

câu trả lời

1

Tôi đã kết thúc theo cách tiếp cận của @ Abbeyenteherrera, với một số điều chỉnh (có thể là bootstrap 3 cụ thể)

Về cơ bản;. chúng tôi không thể phá vỡ

p.breakAfter {
    page-break-after: always;
}
5 or
p.breakAfter {
    page-break-after: always;
}
6 vì chúng không phải là các yếu tố cấp bậc của khối. Vì vậy, chúng tôi nhúng
p.breakAfter {
    page-break-after: always;
}
7 s vào từng cái và áp dụng các
p.breakAfter {
    page-break-after: always;
}
8 quy tắc của chúng tôi chống lại
p.breakAfter {
    page-break-after: always;
}
7 . Thứ hai;. chúng tôi thêm một số phần đệm vào đầu của mỗi div này, để bù đắp cho bất kỳ tác vụ tạo kiểu nào.
<html>
<head></head>
<body>
<p>HỌC WEB CHUẨN</p>
<p class="breakAfter">HỌC WEB CHUẨN</p>
</body>
</html>
3

Điều chỉnh lề và phần đệm là cần thiết để bù đắp một số loại jitter đã được giới thiệu (theo phỏng đoán của tôi - từ bootstrap). Tôi không chắc chắn rằng tôi đang trình bày bất kỳ giải pháp mới nào từ các câu trả lời khác nhau cho câu hỏi này, nhưng tôi nghĩ có thể điều này sẽ giúp ích cho ai đó.

1 hữu ích 0 bình luận chia sẻ

câu trả lời

0

Tôi đã kiểm tra nhiều giải pháp và bất cứ ai cũng không làm việc tốt

Vì vậy, tôi đã thử một mẹo nhỏ và nó đang hoạt động

double foot full style. ______160 được đặt ở cuối trang cuối cùng, nhưng nếu chân trang quá cao thì nó bị chồng chéo bởi nội dung của bảng.

chỉ với bàn chân. ______161 không bị chồng chéo, nhưng không ở cuối trang.

Chúng ta hãy đặt hai bàn chân

<html>
<head></head>
<body>
<p>HỌC WEB CHUẨN</p>
<p class="breakAfter">HỌC WEB CHUẨN</p>
</body>
</html>
4
<html>
<head></head>
<body>
<p>HỌC WEB CHUẨN</p>
<p class="breakAfter">HỌC WEB CHUẨN</p>
</body>
</html>
5

Một vị trí dự kiến ​​lưu trữ trên các trang không phải là cuối cùng, thứ hai được đặt vào chân trang tình cờ của bạn

0 hữu ích 0 bình luận chia sẻ

câu trả lời

1

Tôi đã thử tất cả các vấn đề xuất hiện trên và thấy giải pháp duyệt qua đơn giản và hiệu quả cho vấn đề này. Không có kiểu hoặc ngắt trang cần thiết cho giải pháp này. Đối với giải pháp, định dạng của bảng phải như sau.

<html>
<head></head>
<body>
<p>HỌC WEB CHUẨN</p>
<p class="breakAfter">HỌC WEB CHUẨN</p>
</body>
</html>
6

Định dạng trên bị thử nghiệm và làm việc trong các trình duyệt chéo

1 hữu ích 1 bình luận chia sẻ

câu trả lời

1

Vâng, các bạn. Hầu hết các giải pháp ở đây không hoạt động. Vì vậy, đây là cách mọi thứ làm việc cho tôi.

HTML

<html>
<head></head>
<body>
<p>HỌC WEB CHUẨN</p>
<p class="breakAfter">HỌC WEB CHUẨN</p>
</body>
</html>
7

Đầu tiên được sử dụng như một màn hình trong để không bị thiếu khung trên cùng ở đầu thứ 2 (tức là đầu gốc) khi ngắt trang

1 hữu ích 0 bình luận chia sẻ

câu trả lời

3

Câu trả lời được chấp nhận không hoạt động với tôi trong tất cả các trình duyệt, nhưng sau css đã làm việc với tôi