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

I am using CSS multi-column layout to display text. The layout displays correctly in Firefox. Chrome, however, has a bug that cuts/clips off the tops and bottoms of text characters. Why is this happening? How can I make it work in Chrome?

Here is a screenshot of the problem:

.multicolumn {
  max-w开发者_运维知识库idth: 25em;
  columns: 3;
  margin: 0;
  font: 1.2em/.9 sans-serif;
}

.multicolumn p {
  margin: 0;
}

<div class="multicolumn">
  <p>hydrolytically hypabyssally hypogyny hyponymy mystifyingly karyotypically bathymetrically cloyingly</p>
</div>

Finally, here is the webpage where I'm trying to get this to work: http://www.vcn.bc.ca/~dugan/css3/newhtml.html

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.

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

MDN has example to solve this issue.

.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.

In certain situations, I've seen padding and margins in the columnized content cause this problem. Try:

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

It is more like a bug in chrome i guess.In my case, clear: both was set to the box. unsetting it and giving box-sizing:border-box; solved it for me.

Set break-inside: avoid on the element(s) being cut off.

This works not just for text, but for divs, etc.