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>

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

Answer 1

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.