Css in hình ảnh ngắt trang

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à số 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.






....

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

câu trả lời

19

Css in hình ảnh ngắt trang

Open width from Sinan Ünür




 http-equiv="Content-Type" content="text/html; charset=UTF-8">
</span><span>Test</span><span>
 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 }



    
        
            
        
        
            
        
        
            
        
        
            
        
        
        
            
        
    
    
heading
notes
Long />cell />should'nt />be />cut
Long />cell />should'nt />be />cut
x

Dường như

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 .

Nếu bạn cố gắng để

p.breakAfter {
    page-break-after: always;
}
2 các
p.breakAfter {
    page-break-after: always;
}
3 thẻ .
p.breakAfter {
    page-break-after: always;
}
1, nó hoạt động, nhưng messes xung quanh với cách bố trí 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 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ụ




HỌC WEB CHUẨN

HỌC WEB CHUẨN

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.




HỌC WEB CHUẨN

HỌC WEB CHUẨN

1

JS.




HỌC WEB CHUẨN

HỌC WEB CHUẨN

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;
}
5hoặc
p.breakAfter {
    page-break-after: always;
}
6vì chúng không phải là các yếu tố cấp 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;
}
8quy 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ù cho bất kỳ tạo tác tạo kiểu nào.




HỌC WEB CHUẨN

HỌC WEB CHUẨN

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

đôi chân đầy phong cách. ______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




HỌC WEB CHUẨN

HỌC WEB CHUẨN

4



HỌC WEB CHUẨN

HỌC WEB CHUẨN

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.




HỌC WEB CHUẨN

HỌC WEB CHUẨN

6

Định dạng trên được 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




HỌC WEB CHUẨN

HỌC WEB CHUẨN

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) trong 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