Gần đây, một khách hàng đã gọi cho tôi phàn nàn rằng các trang của họ in không chính xác. Điều này chưa bao giờ là một vấn đề trước đây. Nhưng rõ ràng, bây giờ trang web đã hoạt động được một thời gian và có một số nội dung tốt, các trang đã ngừng in chính xác. Sau khi tự mình thử, tôi thực sự khó chịu khi thấy rằng trang đầu tiên được in nhưng sau đó không có trang nào khác được in. Và trên hết, trang đầu tiên thậm chí còn không được in đúng cách; . Và sau đó, không có gì sau đó Show Tôi chưa bao giờ thấy hành vi này trước đây. Sau vài giờ tìm kiếm trên Google, tôi không tìm thấy câu trả lời, nhưng tôi đã tìm đúng đường dẫn. Tất cả các đề xuất để xử lý sự cố in tràn nội dung này đều nói về việc loại bỏ các kiểu FLOAT và làm cho màn hình trở nên "tĩnh" và thậm chí cố gắng đưa vào một số loại lệnh MS Word "luôn ngắt sau". Không cái nào hiệu quả với tôi, nhưng nó khiến tôi nghĩ về màn hình Trước khi tôi nói về giải pháp, hãy xem thực tế vấn đề. Hãy tưởng tượng có một trang thực sự đơn giản có hai phần tử DIV; Bây giờ, nếu chúng tôi cố gắng in trang này, chúng tôi sẽ gặp sự cố tràn nội dung thực sự kỳ lạ  Chú ý từ trang 1 đến trang 2 nội dung tràn hết ra ngoài lề trang rồi không sang trang 2 nữa. Không có gì ngạc nhiên khi khách hàng của tôi hơi khó chịu. Điều này là hoàn toàn không thể chấp nhận được Sự cố bắt nguồn từ các DIV, PageWidth và SiteContent lồng nhau. Tôi không chắc tại sao việc lồng nhau dường như lại gây ra sự cố, nhưng tôi biết rằng nếu tôi xóa PageWidth DIV gốc, riêng trang có SiteContent DIV sẽ được in bình thường. Tôi nghĩ nó có liên quan đến thực tế là cả hai phần tử đều là phần tử cấp khối. Một phần tử cấp khối bên trong một phần tử cấp khối khác phải gặp khó khăn trong việc tìm ra thời điểm ngắt bởi vì, theo quan điểm của phần tử cha, không có "ngắt trang" để chứa. Chỉ khi bản thân phần tử gốc có thể bao bọc độc đáo thì phần tử cấp độ khối bên trong cũng phải phá vỡ một cách độc đáo (. đây là tất cả lý thuyết ở đây, nhưng đó là cách tôi tìm ra giải pháp của mình) Vì vậy, để khắc phục vấn đề này, chúng ta chỉ cần thay đổi cách DIV gốc, PageWidth, hiển thị. Sử dụng định nghĩa biểu định kiểu chỉ in (như được biểu thị bằng thuộc tính media="print" trong thẻ STYLE), chúng tôi sẽ thay đổi cách hiển thị của PageWidth thành "nội tuyến" khi ở trong ngữ cảnh của lệnh in. Việc hiển thị "nội tuyến" sẽ buộc thẻ PageWidth DIV hoạt động giống như một phần tử SPAN hoặc STRONG, về bản chất, sẽ tự động ngắt từ trang này sang trang khác khi được yêu cầu Vì thẻ STYLE có thuộc tính media="print", nên chúng ta không phải lo lắng về việc các kiểu đó ảnh hưởng đến giao diện thời gian chạy của trang. Điều này chỉ dành cho các kịch bản in. Có cái này tại chỗ, khi chúng tôi đi in bạn sẽ thấy rằng tất cả các nội dung kết thúc một cách thích hợp. Không chỉ vậy, vì chúng tôi đã thay đổi DIV thành một phần tử nội tuyến, điều đó có nghĩa là tất cả các quy tắc Chiều rộng trên đó không còn được áp dụng nữa (hầu hết các phần tử nội tuyến không thích có chiều rộng rõ ràng). Đây thực sự là một điều tốt vì phiên bản in của một trang có thể không được đặt bất kỳ chiều cao và chiều rộng nào, ngoại trừ bố cục của chính giấy in Ghi chú. Nội dung trang bao gồm lời bài hát Over The Rhine, All I Ever Get For Christmas Is Blue - một bài hát tuyệt vời Bạn muốn sử dụng mã từ bài đăng này? Thích bài đăng này? . ❤️ Share the Love With Your Friends! ❤️Tweet nội dung này Những suy nghĩ sâu sắc của @BenNadel - Sửa các DIV khiến nội dung bị cắt bớt khi in https. //www. đồng xu. com/go/851Ý kiến độc giả36 Bình luận Bến Cảm ơn vì bài đăng 15,364 bình luận @Ken, tràn. ẩn có nghĩa là ngăn trang bị hỏng nếu ai đó đưa vào nội dung không phù hợp (tức là. dán một bảng từ MS Word rộng 900px). Ví dụ này không chứng minh nhu cầu đó nhiều lắm, nhưng nếu bạn nghĩ đây là một phần của bố cục nhiều cột của hệ thống quản lý nội dung, thì tràn. ẩn sẽ quan trọng hơn nhiều Và vâng, bạn đã đúng về việc loại bỏ tràn. ẩn giấu. Nếu tôi xóa cái đó cho biểu định kiểu In, nó cũng hoạt động. Chỉ là một cách khác để thay đổi DIV bằng cách nào đó để in. Mặc dù vậy, tôi thích quy tắc "nội tuyến" vì nó cũng sẽ loại bỏ các định nghĩa về chiều cao/chiều rộng (không thực sự hoạt động tốt với các phần tử nội tuyến). Nhưng chắc chắn, hai câu trả lời đúng cho cùng một vấn đề 1 Bình luận Tôi gặp vấn đề tương tự với Firefox về việc cắt bớt trang và thấy rằng tôi bị tràn trang. ẩn trong một div lồng nhau. Tuy nhiên, cài đặt hiển thị. inline không có tác dụng. Thay đổi để tràn. hiển thị cho kiểu in mặc dù đã khắc phục sự cố của tôi 1 Bình luận Này, tôi chỉ muốn cảm ơn bạn đã dành thời gian để viết bài viết này. Bạn đã giúp tôi giải quyết một vấn đề mà tôi đang cố gắng khắc phục Vì vậy, cảm ơn bạn rất nhiều và tất cả những điều tốt đẹp nhất Kịp các công việc tuyệt vời Richard 15,364 bình luận @Richard, Rất vui vì tôi có thể giúp. Mặc dù vậy, tôi vừa gặp một tình huống với Internet Explorer 7 mà cách này không khắc phục được sự cố. Cùng một trang hoạt động tốt trong IE6 và FireFox, nhưng không sao, IE7 phải khác. ( 1 Bình luận Tôi gặp sự cố này từ một tuần trước. Tôi đã tìm kiếm trên web trong vài ngày, tìm thấy các giải pháp "rất khó hiểu" không hiệu quả 15,364 bình luận @Leandro, vui mừng được giúp đỡ. Kể từ khi đăng bài này, tôi đã gặp phải một số tình huống mà điều này không giúp được gì trong IE7. Tuy nhiên, phần lớn, kiểu sửa lỗi này có vẻ hoạt động tốt 1 Bình luận Cảm ơn, mẹo tuyệt vời 1 Bình luận Cảm ơn rất nhiều vì sở trường tuyệt vời 1 Bình luận Tôi gặp sự cố tương tự nhưng khi tôi thử áp dụng phương pháp trên trang này, tôi có thể làm cho nó hoạt động tốt trong IE 7, nhưng sau đó mọi thứ đã bị xáo trộn trong Firefox Cuối cùng tôi nhận thấy rằng bất cứ ai đã tạo ra bản in. css đã đặt một kiểu cho div chứa chính (được gọi là #uber) và đặt cho nó chiều rộng tự động. Tôi đã xóa dòng này và nó đã khắc phục sự cố của tôi trong IE và FireFox Tôi không phải là chuyên gia CSS, vì vậy tôi không biết việc ném chiều rộng tự động vào div vùng chứa chính sẽ làm được điều này, nhưng div nội dung thực tế được lồng trong (3 hoặc 4 cấp độ) nên điều này cuối cùng đã ảnh hưởng đến nội dung của tôi khi in Tôi đã dành toàn bộ thời gian để tập trung vào phong cách của div nội dung mà không nghĩ rằng vấn đề có thể đến từ một trong những div tổ tiên của nó Chúng ta có thể quay lại trình duyệt dựa trên văn bản không? 15,364 bình luận @Jay, tôi nghe thấy bạn. Khi tôi bắt đầu thử nghiệm trên IE7, toàn bộ nhiệm vụ này thậm chí còn khó hơn. Tôi đã rất khó chịu khi phát hiện ra rằng những thứ không in được trong IE6 đã gây rối trong IE7. Arrrg 1 Bình luận Cảm ơn rất nhiều, tôi không thể tin rằng tôi đã không thử hiển thị nội tuyến với css của mình, LOL cứu tôi với Đức Phật Soumpholphakdy 1 Bình luận Này Ben, 15,364 bình luận @Ted, Nó hoạt động đôi khi nhưng không phải những người khác. Tôi đoán đó chỉ là một trong những công cụ bạn có thể sử dụng khi cố gắng khắc phục sự cố in ấn, nhưng đó không phải là mục đích cuối cùng. 1 Bình luận Cảm ơn, điều này đã giải quyết vấn đề một cách hoàn hảo 1 Bình luận cái này không hoạt động với chiều cao của div Tôi đã sửa chiều cao của div và tràn thành ẩn sau đó khi tôi in trang, nó sẽ in nội dung bị tràn vì vậy bất cứ ai có thể giúp tôi? cảm ơn, 1 Bình luận Cảm ơn vì đã đăng bài này Vấn đề của tôi đã được giải quyết bằng cách sử dụng * { div#tên { 1 Bình luận Thanks. Giải pháp đã đăng phù hợp với tôi--Tôi không cần thực hiện bất kỳ thao tác gyratins nào được liệt kê bên dưới Cảm ơn một lần nữa 1 Bình luận cảm ơn bạn đã chia sẻ, tràn. hiện rõ. quan trọng; . yêu công việc của bạn 15,364 bình luận @Dan, @Moshaver, em yêu. ) 1 Bình luận Tôi không thể sử dụng tràn. hiện rõ. quan trọng; . ẩn trên div chứa ảnh xem trước của các mục Điều này làm cho tất cả các hình ảnh xem trước có cùng kích thước và mang lại vẻ ngoài đẹp mắt * { tràn ra. hiện rõ. quan trọng; rõ ràng sẽ phá vỡ điều đó và một vài thứ khác giống như nó Ngoài ra một số người sử dụng tràn. ẩn để làm cho các div cha mẹ mở rộng xung quanh các con nổi của chúng CSS cần một cách chính thức để làm cho các div gốc mở rộng xung quanh các div con nổi của chúng mà không cần xóa các bản hack như rõ ràng. cả trên các nhịp ở dưới cùng của div gốc hoặc lạm dụng tràn. ẩn giấu 2 Bình luận Giải pháp hoạt động tốt ở một mức độ nào đó trên firefox. nhưng IE vẫn có vấn đề. . (. có ai tìm ra giải pháp cho việc này không ?? cảm ơn trước 1 Bình luận Đã gặp vấn đề này một vài lần, tôi thấy việc đơn giản hóa bố cục và loại bỏ tràn, định vị và thả nổi (toàn bộ hoặc ở một mức độ nào đó) sẽ khắc phục được sự cố Gỡ lỗi là một công việc khó khăn nhưng bạn có thể thử thêm đường viền để xem điều gì đang diễn ra tốt nhất có thể, lý tưởng nhất là loại bỏ bố cục bản in thành xương trần và giải thích cho khách hàng biểu định kiểu bản in không nhằm mục đích bắt chước trang web mà để cung cấp nội dung chính trong bản in Hy vọng rằng sẽ giúp, 2 Bình luận Tôi đã xóa Div đã thử đặt ô bảng. và loại bỏ phao. đã thử các giá trị khác nhau để tràn. không hoạt động. [. (]. rất cần giải pháp 15,364 bình luận @Parag, Đôi khi nó chắc chắn cần một số sửa lỗi nghiêm trọng. Một nỗi đau. Tôi chỉ cố gắng tìm ra điều này khi khách hàng yêu cầu cụ thể; 2 Bình luận Rất cảm ơn, bài đăng của bạn đã giúp tôi khắc phục cùng một loại vấn đề mà một công ty tôi đang làm việc cũng gặp phải trên trang của họ. Bạn chắc chắn đã giúp hướng dẫn tôi đi đúng hướng để sửa lỗi này 15,364 bình luận @Matt, Tuyệt vời - rất vui vì nó hoạt động tốt cho bạn 290 Bình luận Thông tin mới quan trọng về "tràn" thuộc tính CSS Vừa có một chiếc iPad, gần đây tôi đã sử dụng Safari đa chạm nhiều hơn (nghĩa là Safari dành cho iPod Touch, iPhone và iPad). Tôi đã phát hiện ra một thứ đã thoát khỏi sự chú ý của tôi trên iPod. Safari đa chạm không hỗ trợ tràn viền. tự động hoặc tràn. cuộn. Nó hoạt động giống như tràn. ẩn giấu Xin thông tin cho bạn, vì điều này có thể sẽ trở thành một vấn đề khi iPad trở nên phổ biến hơn 15,364 bình luận @Steve, Có thật không?? . Điều đó có vẻ giống như một thứ CSS cốt lõi; . Cảm ơn vì đã mang đến sự chú ý của tôi 290 Bình luận Apple vừa thông báo rằng có trợ giúp iPad ở cuối dấu trang của iPad Safari. Tôi đã đến đó và điều hướng đến Safari> Thu phóng và cuộn. Ở đó họ đề cập rằng cách cuộn khung là bằng 2 ngón tay chứ không phải 1 ngón tay như phần còn lại của trang Để đề phòng, tôi quay lại div có thể cuộn (cái có style="overflow. auto") và đã thử nó. Chắc chắn, nó đã làm việc. Vì vậy, vấn đề là Safari KHÔNG NÓI VỚI BẠN rằng nội dung có thể cuộn được bằng cách đặt các thanh cuộn. Không có phản hồi đó, người dùng tiếp tục sử dụng một ngón tay để cuộn và không biết rằng có nội dung mà họ không nhìn thấy Nó giống như đặt văn bản màu trắng trên nền trắng. Nội dung ở đó, nhưng người dùng không biết nó ở đó Vẫn là vi phạm CSS2 mà Safari không đặt thanh cuộn. Nhưng ít nhất, nếu bạn quen thuộc với một trang web và bạn biết rằng có nội dung ở đó mà bạn không nhìn thấy và bạn biết rằng bạn phải chuyển sang dùng 2 ngón tay, thì nội dung đó sẽ không thể truy cập được Tôi vẫn nghĩ đó là một lỗi. Nhưng tôi hy vọng nó sẽ hữu ích để biết vấn đề thực sự là gì và cách giải quyết vấn đề bằng 2 ngón tay. (nghe nghịch quá. ) Tôi có thể buộc một trang khôngChúng tôi có thể thêm thẻ ngắt trang với kiểu "ngắt trang sau. luôn luôn" tại điểm mà chúng tôi muốn giới thiệu ngắt trang trong trang html .
Làm cách nào để xử lý ngắt trang khi in một bảng HTML lớn?Để khắc phục điều này, chỉ cần thay đổi nó thành ngắt trang sau. tự động . Nó sẽ ngắt chính xác và không tạo thêm trang trống.
Làm cách nào để chỉ in một div?Để in nội dung của div trong JavaScript, trước tiên hãy lưu trữ nội dung của div trong một biến JavaScript, sau đó nhấp vào nút in . Nội dung của phần tử div HTML sẽ được trích xuất.
Tại sao máy in của tôi bị cắt ở bên phải của trang?Kiểm tra cài đặt lề trong Tệp>Thiết lập trang để đảm bảo rằng lề phải vẫn ổn . Ngoài ra, hãy kiểm tra định dạng đoạn văn để đảm bảo rằng bạn không có thụt lề phải âm có thể khiến văn bản kéo dài sang một khu vực mà máy in của bạn không thể in được. |
