Rectangle 27 0

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


.multicolumn p {
  display: inline-block;
}
display: inline-block;
width: 100%;

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:

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.

This should be the correct answer.

Note
Rectangle 27 0

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


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.

Note
Rectangle 27 0

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


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.

Note
Rectangle 27 0

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


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

Additionally, you can try {box-sizing: border-box;} if you wish to keep the padding

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

Note
Rectangle 27 0

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


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

Additionally, you can try {box-sizing: border-box;} if you wish to keep the padding

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

Note
Rectangle 27 0

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


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