Column layout: horizontal text overflow in Chrome gets cut off

[rivo]

Hello,

I am using columns for a website layout and it is working well for the main content, but I’m running into a problem with the header. Currently I’m using the same CSS for both the header and the main content so that they behave the same way when the window is re-sized.

Here is the code (the problem is visible only if you open the link in a browser window on a wide display):
http://codepen.io/rivo_/pen/KzJPPV

Here is a screenshot of the problem:
http://sister.fourcallahans.net/between-finite-and-infinite/media/2016-05-06-at-12.02.06-20PM.png

In the second column of the header, one word (“irreconciliations”) doesn’t fit horizontally within the column. In Firefox, the word overflows into the next column, which is perfect. But in Chrome and Safari, it gets cut off at the edge of the column.

Is there any way to override this behavior in Chrome and Safari? I’ve tried to using the overflow and z-index properties but this didn’t seem to affect it.

Many thanks.

[Beverleyh]

Did you make the columns 220px wide for the purpose of the demo or are you really using such narrow columns?

It’s just that the width doesn’t seem realistic for real world content.

If this is real and I was in you shoes, I would be setting a media query breakpoint to change the number of columns, and their widths, before they got so narrow. Then that particular word length would be unlikely to cause problems (except on the skinniest ye olde mobile when the layout got down to one column only)

[rivo]

Thank you for your response! Yes, it does make sense to increase the size of the columns. But I do still want the (typographic) effect of the overlap, so if I increase the column size I will also increase the font size. So, I’m wondering if it’s possible to retain the tight spacing so that the word “irreconciliations” flows across two columns, no matter what the size of the columns/fonts.

[Beverleyh]

Not sure but is column-span what you need? https://css-tricks.com/guide-responsive-friendly-css-columns/

[rivo]

This looks helpful, thanks. I will see if I can get it to work.

[Author]

Posts