Tôi có dữ liệu với bảng html. Mã này hoạt động tốt với firefox. nhưng ngắt trang và số trang không hoạt động trong chrome. tôi cũng cần tránh URL trang
Tôi cần làm việc với chrome
Trình duyệt Chrome. Phiên bản 50. 0. 2661. 75 mét
firefox. 45. 0. 1
Không có thuộc tính
@media print {
h2 {
page-break-before: always;
}
h3, h4 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}
}
0 thực sự trong CSS. Nó thực sự là một bộ gồm 3 thuộc tính. @media print {
h2 {
page-break-before: always;
}
h3, h4 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}
}
1, @media print {
h2 {
page-break-before: always;
}
h3, h4 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}
}
2 và @media print {
h2 {
page-break-before: always;
}
h3, h4 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}
}
3. Các thuộc tính này giúp xác định cách thức hoạt động của tài liệu khi được in. Ví dụ: để làm cho tài liệu in giống sách hơnĐặc tính
ngắt trang trước
Thuộc tính
@media print {
h2 {
page-break-before: always;
}
h3, h4 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}
}
1 thêm dấu ngắt trang trước phần tử mà nó được áp dụngGhi chú. thuộc tính này đang được thay thế bằng thuộc tính chung hơn
@media print {
h2 {
page-break-before: always;
}
h3, h4 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}
}
5. Thuộc tính mới này cũng xử lý ngắt cột và vùng trong khi tương thích về mặt cú pháp với @media print {
h2 {
page-break-before: always;
}
h3, h4 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}
}
1. Vì vậy, trước khi sử dụng @media print {
h2 {
page-break-before: always;
}
h3, h4 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}
}
1, hãy kiểm tra xem bạn có thể sử dụng @media print {
h2 {
page-break-before: always;
}
h3, h4 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}
}
5 thay thế khôngMột trường hợp sử dụng phổ biến cho điều này là áp dụng nó cho bộ chọn
@media print {
h2 {
page-break-before: always;
}
h3, h4 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}
}
1 để người dùng in một trang có nhận xét có thể dễ dàng chọn in toàn bộ tài liệu nhưng dừng lại trước khi nhận xét rõ ràngngắt trang sau
Thuộc tính
@media print {
h2 {
page-break-before: always;
}
h3, h4 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}
}
2 thêm dấu ngắt trang sau phần tử mà nó được áp dụngGhi chú. thuộc tính này đang được thay thế bằng thuộc tính chung chung hơn
@media print {
h2 {
page-break-before: always;
}
h3, h4 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}
}
3. Thuộc tính mới này cũng xử lý ngắt cột và ngắt vùng đồng thời tương thích về mặt cú pháp với @media print {
h2 {
page-break-before: always;
}
h3, h4 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}
}
2. Vì vậy, trước khi sử dụng @media print {
h2 {
page-break-before: always;
}
h3, h4 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}
}
2, hãy kiểm tra xem bạn có thể sử dụng @media print {
h2 {
page-break-before: always;
}
h3, h4 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}
}
3 thay thế khôngphá trang
Thuộc tính
@media print {
h2 {
page-break-before: always;
}
h3, h4 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}
}
3 thêm ngắt trang bên trong phần tử mà nó được áp dụngcú pháp
page-break-after : auto | always | avoid | left | right
page-break-before : auto | always | avoid | left | right
page-break-inside : auto | avoid
Các giá trị
@media print {
h2 {
page-break-before: always;
}
h3, h4 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}
}
8 và @media print {
h2 {
page-break-before: always;
}
h3, h4 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}
}
9 cho @media print {
h2 {
page-break-before: always;
}
h3, h4 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}
}
1 và @media print {
h2 {
page-break-before: always;
}
h3, h4 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}
}
2 đề cập đến bố cục trải rộng [như một cuốn sách] trong đó có các trang bên trái và bên phải riêng biệt. Họ làm việc như thế này
8 buộc một hoặc hai ngắt trang sau phần tử để trang tiếp theo được định dạng là trang bên trái@media print { h2 { page-break-before: always; } h3, h4 { page-break-after: avoid; } pre, blockquote { page-break-inside: avoid; } }
9 buộc một hoặc hai ngắt trang sau phần tử để trang tiếp theo được định dạng là trang bên phải@media print { h2 { page-break-before: always; } h3, h4 { page-break-after: avoid; } pre, blockquote { page-break-inside: avoid; } }
Hãy coi
@media print {
h2 {
page-break-before: always;
}
h3, h4 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}
}
04 là sự kết hợp của cả hai. Thông số kỹ thuật nóiTác nhân người dùng tuân thủ có thể hiểu các giá trị 'trái' và 'phải' là 'luôn luôn'
Thí dụ
@media print {
h2 {
page-break-before: always;
}
h3, h4 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}
}
Đoạn mã này thực hiện 3 việc
- nó buộc ngắt trang trước tất cả các tiêu đề
05 [có lẽ thẻ h2 trong tài liệu của bạn là tiêu đề chương xứng đáng có một trang mới]@media print { h2 { page-break-before: always; } h3, h4 { page-break-after: avoid; } pre, blockquote { page-break-inside: avoid; } }
- nó ngăn ngắt trang ngay sau các tiêu đề phụ vì điều đó có vẻ kỳ quặc
- nó ngăn ngắt trang bên trong thẻ
06 và dấu ngoặc kép cấp khối@media print { h2 { page-break-before: always; } h3, h4 { page-break-after: avoid; } pre, blockquote { page-break-inside: avoid; } }
thuộc tính liên quan
- @trang
- phá vỡ sau
- phá vỡ trước
- trẻ mồ côi
- góa phụ
Các nguồn lực khác
- thuộc tính liên quan đến trang trong thông số kỹ thuật CSS
- ngắt trước và ngắt trang trước tại MDN
- ngắt sau và ngắt trang sau tại MDN
- đột nhập trang tại MDN
Hỗ trợ trình duyệt
ChromeSafariFirefoxOperaIEAndroidiOSAnyAnyAny7+4+TBDTBDBạn có thể in từ thiết bị di động, như AirPrint trên iOS, nhưng chúng tôi chưa thử nghiệm điều này nhiều. Nếu bất cứ ai có dữ liệu về hỗ trợ, hãy cho chúng tôi biết