Làm cách nào để buộc các cột CSS3 của tôi chỉ bị ngắt khi ngắt dòng?

Question

Tôi hiện đang làm việc trên một trang sử dụng một loạt các trường trên một trang biểu mẫu cũng triển khai các cột CSS3.

Vấn đề là các cột được bao bọc theo cách mà đôi khi một nửa trường dữ liệu bị bỏ lại sau khi ngắt sang cột tiếp theo. Trong dự án tôi đang thực sự làm việc, tôi đang nhìn chằm chằm vào một chú thích fieldset trong Chrome 15 được ghép bằng một nửa với nửa trên của các chữ cái ở dưới cùng của một cột và nửa dưới của các chữ cái ở đầu cột tiếp theo. Trong Firefox 7, tôi không thấy vấn đề này (có thể họ đã phá vỡ ONLY tại ngắt dòng hoặc sau khi các phần tử khối).

Tôi không nghĩ đây là lỗi dành riêng cho Chome, tôi nghĩ nó chưa được chỉ định cách thực hiện nó, hoặc một cái gì đó.

Dù sao, tôi muốn nói rõ ràng tất cả các trình duyệt hỗ trợ cột để đột nhập giữa các trường đó. Cảm ơn.

Tôi đã tạo ra một tình huống. Xem phần này jsFiddle. (Rõ ràng trông hơi khác một chút so với các dự án tôi đã mô tả ở trên, nhưng cùng một lỗi.)

Answer 1

Hình như webkit đã triển khai column-break-inside, mà bạn có thể thêm vào các quy tắc fieldset để ngăn chặn nó tách chúng trên cột

fieldset { 
    border: 1px solid #ddd; 
    padding: 1.0em; 
    -webkit-column-break-inside: avoid; 
} 

Answer 2

Chỉ cần thông tin chung cho những người khác gặp phải diễn đàn này và cần giải pháp cho Firefox.

Tại thời điểm viết này, Firefox 22.0 không hỗ trợ tài sản column-break-inside ngay cả với tiền tố -moz-.

Nhưng giải pháp khá đơn giản: Chỉ cần sử dụng display:table;. Bạn cũng có thể làm ** display:inline-block; Vấn đề với các giải pháp này là các mục trong danh sách sẽ mất mục kiểu danh sách hoặc biểu tượng dấu đầu dòng của chúng.

** Ngoài ra, một vấn đề tôi gặp phải với display:inline-block; là nếu văn bản trong hai mục danh sách liên tiếp là rất ngắn, mục dưới cùng sẽ tự bao bọc và nội tuyến với phần bên trên.

display:table; là giải pháp kém nhất trong cả hai giải pháp.

Thông tin thêm ở đây: http://trentwalton.com/2012/02/13/css-column-breaks/

Answer 3

Bạn nên sử dụng break-inside: avoid;

Full cú pháp:

li { 
-webkit-column-break-inside: avoid; 
      page-break-inside: avoid; 
       break-inside: avoid; 
} 

see: https://css-tricks.com/almanac/properties/b/break-inside/