Remove widows and orphans in multi-column module

HTML & CSS
1

1089×547 92.8 KB

Just like in the screenshot above, I’m trying to get each block-quote as a non-breakable chunk of content. Any way to control that via CSS?

1 Like
2

I’m not sure I follow what you are asking. The <blockquote> element is of course a block element already.
Can you clarify what you want?
I notice the name on the second quote has broken away from its next to the next column, is that the problem?

3

Perhaps the HTML will explain better:

<blockquote>
    <p>Content here</p>
    <cite>Jack Thorogood, CEO at NOVP</cite>
</blockquote>

In the attach image, the cite shifts to the second column and I have no idea how to control that.

4

I haven’t had a chance to test this out, but this topic is similar to a previous one where there was an unordered list, and a list-item was breaking into the next column. The solution was to use

     -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;

Try putting that in the css for your blockquote and see if that works.

2 Likes
5

Make the <blockquote> display: inline-block.

1 Like
6

I don’t know why but that display: inline-block; actually worked.

7

It’s not an obvious solution, but it has the effect of keeping a block together in a column layout.

3 Likes
8

Webmachines answer is the correct ‘non-hacky’ way to do this but the inline-block has better support in older browsers and will do little harm.

blockquote {
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}

As this behaviour of inline-block is well known it does not seem to be any part of the spec it would probably be safer to include both the rules. I’ve a feeling that inline-block elements should wrap columns and this could change if it is an omission.

3 Likes
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.