Dlaczego Chrome odcina tekst w układzie wielokolumnowym CSS3?

Question

Demonstracja problemu jest tutaj.

http://www.vcn.bc.ca/~dugan/css3/newhtml.html

The multi-kolumna układu CSS3 wyświetla poprawnie w Firefoksie. Opera i IE8 wyświetlają ją jako jedną kolumnę (co jest w porządku). Chrome próbuje jednak wyświetlić go jako wiele kolumn, a odcina część tekstu.

Czy jest jakiś sposób, aby zadziałało to w Chrome?

Answer 1

Wydaje się pokazywać cały tekst, jeśli ustawiono wysokość wiersza 1,5 na regule p w pliku dugan.css. Wciąż wygląda na to, że Chrome dokładnie balansuje kolumny, może być konieczne wstawienie pustego akapitu lub dodanie dopełnienia do ostatniego akapitu lub czegoś podobnego.

Answer 2

Dostosowanie wysokości linii (lub rozmiaru czcionki, zgodnie z zaleceniami w innym miejscu) może usunąć błąd przycinania Chrome, ale tylko przypadkowo. Jeśli chcesz uniknąć go programowo, rozwiązanie działa tylko teraz jest:

.multicolumn p { 
    display: inline-block; 
} 

Można rozszerzyć ten do wszystkich elementów podrzędnych wielokolumnowego pojemnika, ale prawdopodobnie trzeba będzie dodać width: 100%; w pewnym momencie. Aby uzyskać więcej informacji, przeczytaj dyskusję pod adresem http://www.symphonious.net/2010/12/30/controlling-wrapping-in-css3-columns/ i http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/.

Co więcej, jeśli obejście blokowe nie pomaga, przyczyną odcięcia bitów tekstu może być rekurencyjne zastosowanie wielokolumnowego projektu. Zauważyłem to w bardziej złożonym scenariuszu niż powyższy, w którym zdalny element nadrzędny wielokolumnowego kontenera tekstowego miał własny układ kolumn. Usunięcie liczby kolumn z kontenera najwyższego poziomu naprawiło problemy z łamaniem kolumn.

Answer 3

body{ 
    -webkit-column-break-inside:avoid; 
} 

Answer 4

W niektórych sytuacjach zaobserwowałem, że dopełnienie i marginesy w zmumifikowanych treściach powodują ten problem. Wypróbuj:

.columnized-content { margin: 0; padding: 0; }