Why is Chrome cutting off text in my CSS3 multi-column layout?

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

Adjusting line-height (or font-size, as recommended elsewhere) might remove Chrome's clipping bug, but only accidentally. If you want to avoid it programmatically, the only working solution by now is:

.multicolumn p {
  display: inline-block;
}

You might expand this to all child elements of the multicolumn container, but probably you will need to add width: 100%; at some point. For more info, read the discussion at http://www.symphonious.net/2010/12/30/controlling-wrapping-in-css3-columns/ and http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/.

Furthermore, if the inline-block workaround does not help, the cause for cutting off text bits can consist of a recursive application of multi-column design. I observed this in a more complex scenario than the above where a remote parent of a multi-column text container had its own column layout. Removing the column-count from the top-level container fixed the column-break problems.

Can't believe this still exits even after 11 years. Here MDN has example to solve this issue which same as accepted answer.

.column-item {
  break-inside: avoid;
  page-break-inside: avoid;
}

Seems to show all the text if you set a line height of 1.5 on the p rule in dugan.css. There still seems to be a defect in exactly how Chrome balances the columns, you may need to put an empty paragraph in or add some padding on the last paragraph or something.