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

user_240515 0
Viewed 13582

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:

Screenshot showing the bug in Chrome, with text getting cut off

.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

google-chrome css
6 Answers

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.

user_2806910

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;
}
user_141129470

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.

user_109891760
Related