- Trang chủ
- Tham khảo
- CSS
- Thuộc tính page-break-after
Định nghĩa và sử dụng
Thuộc tính page-break-after xác định các phân chia văn bản ngay sau thành phần.
Thuộc tính page-break-after thường sử dụng cho văn bản print.
Cấu trúc
tag { page-break-after: giá trị; }
Với giá trị như sau:
page-break-after | auto | page-break-after: auto; | Phân chia văn bản ngay sau thành phần nếu cần thiết, đây là dạng mặc định. |
always | page-break-after: always; | Phân chia văn bản ngay sau thành phần. | |
avoid | page-break-after: avoid; | Tránh phân chia văn bản ngay sau thành phần. | |
left | page-break-after: left; | Phân chia văn bản ngay sau bên trái thành phần. | |
right | page-break-after: right; | Phân chia văn bản ngay sau bên phải thành phần. | |
inherit | page-break-after: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha [thành phần bao ngoài]. |
Ví dụ
HTML viết:
HỌC WEB CHUẨN
HỌC WEB CHUẨN
Hiển thị trình duyệt khi chưa có CSS:
HỌC WEB CHUẨN
HỌC WEB CHUẨN
CSS viết:
p.breakAfter { page-break-after: always; }
Hiển thị trình duyệt khi có CSS:
HỌC WEB CHUẨN
HỌC WEB CHUẨN
Trình duyệt hỗ trợ
Thuộc tính page-break-after được hỗ trợ trong đa số các trình duyệt.
Từ trình duyệt IE8 trở xuống không hỗ trợ giá trị: left, right, inherit.
Từ trình duyệt Firefox, Chrome, Safari không hỗ trợ giá trị: avoid, left, right.
- Trang chủ
- Tham khảo
- CSS
- Thuộc tính page-break-inside
Định nghĩa và sử dụng
Thuộc tính page-break-inside xác định các phân chia văn bản ngay bên trong thành phần.
Thuộc tính page-break-inside thường sử dụng cho văn bản print.
Cấu trúc
tag { page-break-inside: giá trị; }
Với giá trị như sau:
page-break-inside | auto | page-break-inside: auto; | Phân chia văn bản ngay bên trong thành phần nếu cần thiết, đây là dạng mặc định. |
always | page-break-inside: always; | Phân chia văn bản ngay bên trong thành phần. | |
avoid | page-break-inside: avoid; | Tránh phân chia văn bản ngay bên trong thành phần. | |
left | page-break-inside: left; | Phân chia văn bản ngay bên trong, bên trái thành phần. | |
right | page-break-inside: right; | Phân chia văn bản ngay bên trong, bên phải thành phần. | |
inherit | page-break-inside: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha [thành phần bao ngoài]. |
Ví dụ
HTML viết:
HỌC WEB CHUẨN
HỌC WEB CHUẨN
Hiển thị trình duyệt khi chưa có CSS:
HỌC WEB CHUẨN
HỌC WEB CHUẨN
CSS viết:
p.breakInside { page-break-inside: always; }
Hiển thị trình duyệt khi có CSS:
HỌC WEB CHUẨN
HỌC WEB CHUẨN
Trình duyệt hỗ trợ
Thuộc tính page-break-inside được hỗ trợ trong đa số các trình duyệt.
Từ trình duyệt IE8 trở xuống không hỗ trợ giá trị: left, right, inherit.
Từ trình duyệt Firefox, Chrome, Safari không hỗ trợ giá trị: avoid, left, right.
answer
257
Test
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
heading
notes
x
x
x
257 hữu ích 5 bình luận chia sẻ
answer
40
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: auto. Nó sẽ phá vỡ chính xác và không tạo thêm một trang trống.
@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 }
}
....
40 hữu ích 2 bình luận chia sẻ
answer
19
Mở rộng từ giải pháp Sinan Ünür:
Test
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
Longcellshould'ntbecut
Longcellshould'ntbecut
x
Dường
như page-break-inside:avoid
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 phải là khối nội tuyến.
Nếu bạn cố gắng để display:block
các TR
thẻ, và sử dụng có page-break-inside:avoid
, 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ẻ
answer
9
Không có câu trả lời nào ở đây 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 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 gọn gàng thành nhiều trang và thêm tiêu đề bảng vào mỗi trang.
9 hữu ích 5 bình luận chia sẻ
answer
6
Sử dụng các thuộc tính CSS này:
page-break-after
page-break-before
Ví dụ:
@media print
{
table {page-break-after:always}
}
....
thông qua
6 hữu ích 5 bình luận chia sẻ
answer
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 :
.avoidBreak {
border: 2px solid;
page-break-inside:avoid;
}
JS :
function Print[]{
$[".tableToPrint td, .tableToPrint th"].each[function[]{ $[this].css["width", $[this].width[] + "px"] }];
$[".tableToPrint tr"].wrap[""];
window.print[];
}
Hoạt động như một lá bùa!
4 hữu ích 0 bình luận chia sẻ
answer
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ỡ
tr
hoặc td
vì 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 div
s vào từng cái, và áp dụng các page-break-*
quy tắc của chúng tôi chống lại div
. 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.
@media print {
/* avoid cutting tr's in half */
th div, td div {
margin-top:-8px;
padding-top:8px;
page-break-inside:avoid;
}
}
$[document].ready[function[]{
// Wrap each tr and td's content within a div
// [todo: add logic so we only do this when printing]
$["table tbody th, table tbody td"].wrapInner[""];
}]
Các đ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 cho câu hỏi này, nhưng tôi nghĩ có lẽ điều này sẽ giúp được ai đó.
1 hữu ích 0 bình luận chia sẻ
answer
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ó hoạt động:
t feet with style:
position: fixed; bottom: 0px;
đượ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: display: table-footer-group;
không bị chồng chéo, nhưng không ở cuối trang cuối ...
Chúng ta hãy đặt hai bàn chân:
TFOOT.placer {
display: table-footer-group;
height: 130px;
}
TFOOT.contenter {
display: table-footer-group;
position: fixed;
bottom: 0px;
height: 130px;
}
your long text or high image here
Một vị trí dự trữ trên các trang không phải là cuối cùng, thứ hai đặt vào chân trang tình cờ của bạn.
0 hữu ích 0 bình luận chia sẻ
answer
1
Tôi đã thử tất cả các đề xuất ở trên và thấy giải pháp trình duyệt chéo đơ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:
Heading
data
Đị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ẻ
answer
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
.
.
ABC
ABC
.
.
//YOUR CODE
Bộ đầu đầu tiên được sử dụng như một hình nộm để không bị thiếu viền 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ẻ
answer
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:
tr
{
display: table-row-group;
page-break-inside:avoid;
page-break-after:auto;
}
Cấu trúc html là:
...
Trong trường hợp
của tôi, có một số vấn đề bổ sung với thead tr
, nhưng điều này đã giải quyết vấn đề ban đầu là giữ cho các hàng của bảng không bị phá vỡ.
Vì các vấn đề tiêu đề, cuối cùng tôi đã kết thúc với:
#theTable td *
{
page-break-inside:avoid;
}
Điều này đã không ngăn hàng bị phá vỡ; chỉ mỗi nội dung của mỗi tế bào.
3 hữu ích 0 bình luận chia sẻ