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

Question

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-width: 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>

Answer 1

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.