Stop CSS3 columns breaking paragraphs up

Question

How would I go about stop the browser from breaking up paragraphs when using CSS3 columns? I have this code:

<div class="container">
    <div class="box"><!-- text --></div>
    <div class="box"><!-- text --></div>
    <div class="box"><!-- text --></div>
    <div class="box"><!-- text --></div>
    <div class="box"><!-- text --></div>
    <div class="box"><!-- text --></div>
    <div class="box"><!-- text --></div>
    <div class="box"><!-- text --></div>
</div>

.container {
    column-count: 3;
 }

This is a visual representation of what I want. On the left, is what happens by default, and on the right, what I want to happen.

css3 columns

I don't mind if the columns are unequal lengths, what's important is that none of the divs are broken across columns.

score 23 · Accepted Answer · answered Nov 10 '14 at 23:03

The setting break-inside: avoid would do this, according to the description of break-inside in the CSS Multi-column Layout Module. But browser support is limited so that you need to use additionally some other settings that reflect ideas in older drafts, implemented in some browsers:

.container {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
 }
div.box { 
  text-indent: 1em; /* To show paragraph starts. */
  page-break-inside: avoid; /* For Firefox. */
  -webkit-column-break-inside: avoid; /* For Chrome & friends. */
  break-inside: avoid; /* For standard browsers like IE. :-) */
}

<div class="container">
    <div class="box">This is a short paragraph.</div>
    <div class="box">This is a short paragraph, too.</div>
    <div class="box">This is yet another short paragraph.</div>
    <div class="box">This is a short paragraph.</div>
    <div class="box">This, too, is a short paragraph.</div>
    <div class="box">This is a longer paragraph, which may get divided into two columns..</div>
    <div class="box">This is a short paragraph.</div>
    <div class="box">This is a short paragraph.</div>
</div>

I came here now because I have a case where this doesn't seem to work on Chrome -- neither Mac nor Win (FF OK on Win, Ubuntu and Mac, and FF on Ubuntu); however the above in addition to inline-block on .box (as per the next answer) did the trick. Hm. — user3445853, Oct 19 '20 at 16:12
What should we try if none of these solutions actually work? — keyboard-warrior, Feb 11 '21 at 14:45

Christina · Answer 2 · 2014-11-11T00:38:14.647

11

enter image description here On the .box add the style:

.box {
    display:inline-block;
    ... other styles ...
}

Demo: http://jsbin.com/murog/1/

edited Nov 11 '14 at 00:38

answered Nov 10 '14 at 22:50

Christina

34,296
17
83
119

`display: inline-block;` works, thanks for the answer :) however, the other answer I got, which involves using `break-inside: avoid;` works better for what I'm using it for. But as a fall back, `display: inline-block;` works fine :) – Tom Oakley Nov 12 '14 at 12:48
Note: if you have multiple consecutive paragraphs that are shorter than half you column width - they will render on the same line. Highly unlikely to happen with real content, but it was confusing me when I was testing my styles. See https://stackoverflow.com/a/29402718/924597 for workaround. – Shorn Sep 01 '20 at 03:27
Unfortunately none of these answers work. I have same issue, several paragraphs in one div. Need the
content to not break, and stay together, I've tried everything, nothing works to keep the text together, nothing works to push the
to the next column. You may be able to wrap all
elements in one div and tell the div not to break, but that is not ideal.
– keyboard-warrior Feb 11 '21 at 14:47

Stop CSS3 columns breaking paragraphs up

2 Answers2