HTML/CSS - Phương pháp hay nhất để giữ khoảng trắng trên các phần tử nhất định?

Question

Cách tốt nhất để giữ gìn khoảng trắng trong HTML là gì? Chúng tôi có rất nhiều trang cung cấp dữ liệu từ cơ sở dữ liệu của chúng tôi và dữ liệu có thể có nhiều không gian trong đó. Các yếu tố HTML rendered giữ các dữ liệu khác nhau từ thẻ neo (<a>), spans (<span>), table rows (<tr>, <td>, etc.

Điều dễ nhất để làm ngay bây giờ sẽ có thêm một lớp css toàn cầu như vậy:

body a, span, tr, td { white-space: pre; } 

Tôi đang tự hỏi nếu có một cách tốt hơn để triển khai này mà không cần gán một lớp cho từng phần tử HTML riêng lẻ.

Answer 1

Tôi sẽ sử dụng kỹ thuật tương tự, nhưng bên trong một wrapper lớp dữ liệu mà nó là cần thiết:

.data a, .data span, .data tr, .data td { white-space: pre; } 

HTML:

<div class="data"> 
.... 

</div> 

Answer 2

Điều gì là sai với thay thế chỗ bởi & nbsp ;? Điều này sẽ làm việc bên trong bất kỳ phần tử nào và bảo toàn các khoảng trống trong đầu ra được hiển thị.

Answer 3

Điều này tùy thuộc vào việc bạn muốn giữ lại tất cả các khoảng trắng trong các yếu tố nhất định và chính xác những gì sẽ xảy ra ở đó. Giả sử rằng không có quy tắc CSS có thể can thiệp, CSS của bạn có thể được đơn giản hóa để

a, span, tr { white-space: pre; } 

vì một yếu tố a là alway trong body và td theo mặc định được thừa hưởng tài sản từ tr.

Nếu bạn chỉ muốn ngăn nhiều không gian bị sụp đổ, thay vì buộc phân chia cố định thành đường kẻ, thì white-space: pre-wrap hoặc thay thế khoảng trống bằng khoảng trắng ngắt có thể phù hợp hơn.

Cuối cùng, nhu cầu và khả năng hạn chế quy tắc đối với các yếu tố được chọn sẽ phụ thuộc rất nhiều vào cách thực hiện lựa chọn. Có lẽ bạn có thể chọn lọc white-space thành pre (hoặc pre-wrap) cho một số yếu tố kèm theo các phần có liên quan, nhớ rằng thuộc tính kế thừa nếu không được đặt trên các phần tử bên trong.

Bạn cũng có thể phá vỡ các thừa kế: bạn có thể thiết white-space: pre trên một yếu tố table ví dụ, nếu bạn muốn thực hiện các quy tắc áp dụng cho nhất của nội dung, và thiết lập white-space: normal trên những hàng hoặc các tế bào nơi nó không phải là được áp dụng.

Answer 4

<pre>no need for  style</pre>