Cắt một nửa văn bản in css
|
Vì lý do tương thích, các trình duyệt nên coi Show autoavoidavoidđịnh nghĩa chính thứcGiá trị ban đầu page-break-inside =8. Kế thừa giá trị không được tính toán như đã chỉ định Loại hoạt hình rời rạc Nếu bạn đang tự hỏi tại sao bạn không thể in trang web đúng cách, bạn không đơn độc. Đôi khi, các phần của trang in được in trống, khoảng trống lớn trong tài liệu in không nên in và/hoặc toàn bộ trang không bao giờ được in đầy đủ. Tự hỏi làm thế nào để in ra một trang web mà không bị cắt và bỏ trống? . Hôm nay tôi chỉ muốn chỉ ra ba yếu tố mà bạn có thể cần lưu ý Đầu tiên, hãy nhìn vào phong cách của bạn. css, nếu bất kỳ vùng chứa nào bạn đang cố in bị trôi nổi, chúng sẽ bị cắt như bạn đang thấy. Đảm bảo rằng bạn tắt tất cả tính năng nổi mà bạn có thể mà không làm hỏng bố cục trong bản in của mình. css Dự án thiết kế lại trang web Suy nghĩ về việc thiết kế lại trang web?
Xem bây giờ
Thứ hai, một vấn đề quan trọng cần lưu ý đối với CSS in là vị trí tuyệt đối có thể “cắt” một số phần của trang, khiến chúng không thể in được. Để ngăn điều này xảy ra, hãy khôi phục vị trí của các phần tử đó Thứ ba, nếu phần tử tràn được đặt thành 'ẩn' theo phong cách của bạn. css, nó cũng có thể khiến văn bản của bạn bị cắt. Trong in ấn. css, đặt “tràn. có thể nhìn thấy" thay vì "tràn. tự động” hoặc “tràn. ẩn” trên div. Định nghĩa của tràn tự động là. “Nếu phần tràn bị cắt bớt, một thanh cuộn sẽ được thêm vào để xem phần còn lại của nội dung” —nhưng các thanh cuộn không tồn tại trên các trang in Để rút ngắn một câu chuyện dài, bạn nên tránh sử dụng phao, định vị cố định và tràn. Đây là ví dụ của tôi để thiết lập hành vi được xác định trước cho tất cả các thành phần của trang như hình bên dưới
Một yếu tố khác bạn có thể muốn xem xét là sử dụng cú pháp ngắt trang. Nó chỉ định nơi ngắt trang nên và không nên xảy ra. CSS cung cấp ba thuộc tính hữu ích để chỉ định hành vi ngắt trang—“ngắt trang trước”, “ngắt trang sau” và “ngắt trang bên trong”. Bạn có thể thử với các thuộc tính này, nhưng chúng không được một số trình duyệt hỗ trợ đầy đủ. Tuy nhiên, vẫn nên tận dụng chúng Hy vọng những mẹo css này sẽ giúp bạn giải quyết vấn đề phổ biến ở trên và làm cho trang web của bạn trông đẹp trên giấy Các giải pháp cho sự cố hiển thị màn hình có thể gây ra sự cố khi in ra trang. Hoặc có lẽ bạn cần sắp xếp lại các phần của trang để nó được in gọn gàng. CSS cho phép bạn tạo các kiểu khác nhau chỉ áp dụng khi in. Bạn có thể sử dụng hai phần kiểu đặc biệt, @media print và @page @media printCác kiểu mà bạn chỉ muốn áp dụng khi in đi vào phần in @media của biểu định kiểu bên trong hoặc bên ngoài của bạn. Bạn có thể chọn phông chữ và kích thước phông chữ hoạt động tốt hơn khi in so với trên màn hình. Hoặc, có lẽ bạn cần sắp xếp lại các phần của trang để phù hợp hơn trên giấy. Hoặc, có thể bạn cần ẩn các phần của trang không hữu ích khi in, chẳng hạn như menu hoặc quảng cáo. Có một số loại @media khác, bao gồm màn hình @media Làm thế nào nó hoạt động. Trong biểu định kiểu của bạn (nội bộ hoặc bên ngoài), hãy thêm một phần ở cuối để giữ các kiểu cần khác khi in, @media print { }. Đặt tất cả các kiểu như vậy giữa các dấu ngoặc nhọn. Cẩn thận không nhập khoảng trắng sau @ Ví dụThay đổi họ phông chữ cho tiêu đề và đoạn văn. Đặt kích thước phông chữ theo điểm cho đoạn văn. Bỏ định vị cho một phần tử có lớp 'được định vị'. Ẩn phần tử có ID 'menu' @media in { h1 {phông chữ-họ. "Britannic Bold", Broadway, Calibri, sans-serif; p {cỡ chữ. 10pt; định vị {vị trí. tĩnh;} #menu {hiển thị. không;} Niềng răng phù hợp. Hãy cẩn thận để có các bộ dấu ngoặc nhọn, { }. Áp dụng các lớp học. Tất nhiên, bạn phải áp dụng bất kỳ lớp nào bạn đã tạo trong phần in @media này Đo. Bạn có thể sử dụng kích thước điểm cho phông chữ của mình vì kiểu này dành cho in ấn. Không sử dụng kích thước điểm để đặt kích thước hiển thị màn hình. Họ thường tạo văn bản quá nhỏ để đọc trên màn hình Kiểu nội tuyến. Mọi kiểu nội tuyến sẽ ghi đè các kiểu in @media vì các kiểu nội tuyến xuất hiện cuối cùng trong chuỗi các kiểu. Đây là một lý do khác để tránh các kiểu nội tuyến Phần @page, @page { } , trong biểu định kiểu bên trong hoặc bên ngoài của bạn chứa các kiểu ảnh hưởng đến bố cục trên trang được in. Bạn có thể đặt lề của trang, hướng trang, ngắt trang và một số tính năng khác. Nếu bạn đặt các phong cách khác trong phần này, chúng sẽ bị bỏ qua Thuộc tính SIZE có thể có các giá trị AUTO, PORTRAIT, LANDSCAPE hoặc chiều rộng và chiều cao cụ thể, chẳng hạn như size. số 8. 5in 11in;. TỰ ĐỘNG là mặc định Ví dụ/*Để đặt lề 2 cm trên trang theo hướng ngang*/ @trang { Đo. Bạn có thể sử dụng các phép đo vật lý như centimet và inch khi đặt lề hoặc kích thước trang chứ không phải pixel hoặc điểm. Tỷ lệ phần trăm sẽ được tính theo kích thước của hộp trang (thường là kích thước của trang) ngắt trangChỉ nên bao gồm thuộc tính ngắt trang trong phần in @media. Thuộc tính sẽ bị bỏ qua trong phần @page Ngắt trang có thể được yêu cầu xảy ra trước hoặc sau một số kiểu hoặc phần tử có ID nhất định. Ví dụ. Nếu bạn muốn cấm ngắt trang xảy ra tại một vị trí nhất định, bạn đã hết may mắn. Điều tốt nhất bạn có thể làm là yêu cầu trình duyệt tránh ngắt ở đó nếu có thể bảng {page-break-inside. ngăn ngừa; Từng bước một. @media print và @pageBạn sẽ học được gì. để xem trang web của bạn trong Xem trước khi in và đánh giá bố cục để in để sử dụng @media print trong biểu định kiểu bên ngoài để kiểm soát việc in ra để thêm dấu ngắt trang . , hector26-Họ-Tên. htm to use @page to control print margins to use TRANSFORM to scale DIV Start with: , hector26-Lastname-Firstname.htm Xem trước bản in và đánh giáKiểm soát những gì hiển thị trên màn hình không phải lúc nào cũng dẫn đến một bản in đẹp từ trình duyệt. Giấy có chiều rộng cố định. Người xem của bạn sẽ sử dụng loại giấy nào? . 5" x 11") là tiêu chuẩn ở Hoa Kỳ nhưng các nơi khác trên thế giới chủ yếu sử dụng giấy A4 (10 x 297 mm), khoảng 8. 27" × 11. 69". Vậy A4 hẹp hơn và cao hơn khổ Letter Thiết lập trang được kiểm soát bởi người xem, không phải bởi bạn. Vì vậy, một lần nữa, bạn không thể tự mình kiểm soát toàn bộ quá trình. Các trình duyệt khác nhau tự động xử lý một số sự cố nhưng khác nhau. Shrink to Fit giúp một chút nhưng không giải quyết được tất cả các vấn đề
Biểu định kiểu bên ngoài. @media printẨn hoặc thay đổi kích thước các phần của trang là tác vụ phổ biến đối với phần kiểu in @media. Bản in ra thường trông đẹp hơn khi không có đường viền. Bạn thậm chí có thể xóa nền để chúng không thể in ngay cả khi trình duyệt được định cấu hình để in nền Hãy nhớ rằng bất kỳ thay đổi nào bạn thực hiện với kiểu @media print hoặc @page, kiểu nội tuyến sẽ ghi đè lên những thay đổi đó. Bạn có thể phải di chuyển một số kiểu nội tuyến sang biểu định kiểu nội bộ của mình. Vâng, tôi có thể tránh được tình tiết tăng nặng nhỏ này nhưng bạn cần trải nghiệm lý do tại sao kiểu nội tuyến có thể là một ý tưởng tồi
Thêm ngắt trangNhìn vào Xem trước bản in cho thấy ảnh du lịch và bảng có thể bị tách ra giữa hai tờ giấy. Điều này đặc biệt không tốt cho một cái bàn Bạn có thể khắc phục điều đó bằng cách sử dụng một trong các thuộc tính Ngắt trang CSS để buộc ngắt trang bằng ngắt trang trước hoặc ngắt trang sau. Chúng có thể có các giá trị luôn luôn hoặc tự động. Các giá trị khác tồn tại nhưng chưa được hầu hết các trình duyệt hỗ trợ Các thuộc tính này có thể được áp dụng dưới dạng kiểu nội tuyến hoặc trong biểu định kiểu mà không phải lo lắng về @media vì chúng chỉ ảnh hưởng đến bố cục trong bản in, không bao giờ trên màn hình Nhận xét về Thuộc tính ngắt trang ngắt trang trước và ngắt trang sau
thuộc tính ngắt trang bên trong
Kế hoạch là gì? . luôn tạo kiểu cho tiêu đề Sở thích của tôi. Điều đó sẽ buộc toàn bộ phần Du lịch sang một trang mới. Sau đó, bạn sẽ kiểm tra bản xem trước khi in để xem bạn có cần ngắt trang khác do thay đổi này không
Biểu định kiểu nội bộ. @trangLẽ ra bạn nên đặt lề giấy từ sớm. Thật dễ dàng để tham gia vào việc khắc phục sự cố và quên đặt những điều cơ bản trước. Với lề giấy cố định, chúng tôi không phải lo lắng về việc các trình duyệt khác nhau có lề mặc định khác nhau. Lợi nhuận mặc định của IE là tất cả 0. 75". của Chrome là 0. 4". của Firefox là 0. 5" Điều chỉnh lề trên trang in là phần @page của các kiểu thường được sử dụng cho. Lề hẹp hơn để lại nhiều chỗ hơn cho nội dung trang
Chia tỷ lệ ảnh DIV để in với TRANSFORMSẽ tốt hơn nếu ảnh du lịch được in đầy đủ mà không chạy dưới gầm bàn. Bạn có thể làm gì để khắc phục điều này? Nếu những bức ảnh nhỏ hơn thì sao? . Sau đó, bạn có thể lần lượt thay đổi thuộc tính lề đã căn giữa DIV và chọn các lề mới giúp ảnh không bị chảy dưới bàn. Vì chúng tôi biết chiều rộng của tờ giấy (Cỡ chữ trong các bài học này), chúng tôi có thể thử nghiệm cho đến khi nó hoàn hảo đến từng pixel. Tôi đã làm phần đó cho bạn. (Không có gì. ) Có một sự phức tạp cần lưu ý. Kiểu tập trung vào ảnh DIV nằm trong biểu định kiểu nội bộ. Vì vậy, bạn không thể sử dụng biểu định kiểu bên ngoài để điều chỉnh kiểu đó để in. Phong cách bên trong chiến thắng phong cách bên ngoài trong tầng. Bạn phải đặt phần in @media này trong biểu định kiểu nội bộ
|
