CSS và In ấn: Giữ khối văn bản cùng

Question

Đây là một Nhiều Choice thi điển hình, Giả dạng câu hỏi:

<question qid='1'> 
<stem>What is your name?</stem> 
<choice value = 'a'>Arthur, King of the Britons</choice> 
<choice value = 'b'>There are some who call me ... Tim!</choice> 
<choice value = 'c'>He is brave Sir Robin, brave Sir Robin, who-- Shut up! Um, n-- n-- n-- nobody, really. I'm j-- j-- j-- ju-- just, um-- just passing through.</choice> 
<choice value = 'd'>Sir Galahad... the Chaste.</choice> 
<choice value = 'e'>Zoot... Just Zoot.</choice> 
</question> 

và tôi đã có tất cả điều này ánh xạ tới phong cách phù hợp với các nút radio cho web.

Bây giờ, tôi cần tạo phiên bản có thể in của thử nghiệm. Điều này thực sự đơn giản hơn, trong đó tôi không cần phải bao gồm radio, chỉ cần '___' cho một dấu kiểm. Vấn đề chính là làm thế nào để giữ cho các câu hỏi từ tách trên ngắt trang.

Answer 1

Tôi chưa bao giờ có may mắn với việc ngăn chặn những thứ như thế. Nó có thể là một chút bẩn, nhưng nếu các câu hỏi thường có chiều dài tương tự, bạn có thể buộc một trang-break sau mỗi câu hỏi X?

<style type="text/css"> 
.pageBreak{ 
    page-break-before: always; 
} 
</style> 

<question>...</question><br class="pageBreak" /> 
<question>...</question> 

(Hoặc áp dụng lớp đó đến câu hỏi hoặc bất cứ điều gì bạn muốn)

Bạn có thể thử bằng cách sử dụng trang-break-bên trong bất động sản, nhưng tôi đã không nhìn thấy nó phù hợp như hỗ trợ trình duyệt cho nó là một mớ hỗn độn ngay bây giờ:

question { 
    page-break-inside:avoid; 
} 

Answer 2

Tôi khuyên bạn nên xem xét các quy tắc page-break-after, page-break-inside và page-break-before trong CSS.

Answer 3

sử dụng một kiểu in riêng biệt, và sử dụng page-break-before và page-break-after chọn lọc dùng cho hàng đầu của bạn và các câu hỏi kết thúc trên mỗi trang.

Nếu bài kiểm tra là tĩnh, bạn có thể vẽ các lớp bạn sử dụng và làm cho nó hoạt động mà không cần gì hơn CSS.

Answer 4

Sử dụng bố cục bảng. Nhưng để tránh thay đổi ngữ nghĩa, hãy sử dụng CSS.

question { 
    display: inline-table; 
}