Last Comment Bug 549114 - Support Column Breaks part of CSS3 columns spec
: Support Column Breaks part of CSS3 columns spec
Status: NEW
: css3, dev-doc-needed, DevAdvocacy
Product: Core
Classification: Components
Component: Layout (show other bugs)
: Trunk
: All All
: P2 enhancement with 56 votes (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
: Jet Villegas (:jet)
: 649648 (view as bug list)
Depends on: 132035 775618 page-break-inside
Blocks: css3-multicol css3-break css3test
  Show dependency treegraph
Reported: 2010-02-27 09:46 PST by william
Modified: 2016-07-23 13:03 PDT (History)
36 users (show)
See Also:
Crash Signature:
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Description william 2010-02-27 09:46:22 PST
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6 GTBDFff GTB7.0
Build Identifier: 

It doesn't appear that the column breaking part of the css3 spec is implemented:

I am building a webapp that doesn't need to work in IE, and the lack of support for break-inside: avoid-column; is causing problems.

Reproducible: Always
Comment 1 cobexer 2011-01-01 09:10:46 PST
This bug makes CSS3 multi-column layouts entirely useless for everything other than text. half implemented things don't help anybody!
Comment 2 richardigp 2011-04-03 08:44:03 PDT
The column flow also doesn't happen for tables. These should column break at rows across columns without additional tags. 

As above the use is for a webapp and XULRunner application. 

This could be addressed with colbreak inserted into the <tr>, but would probably be better if tables column flowed like text, as part of the standard flow.
Comment 3 Boris Zbarsky [:bz] (still a bit busy) 2011-04-26 12:43:18 PDT
*** Bug 649648 has been marked as a duplicate of this bug. ***
Comment 4 Ian Thomas ('thelem') 2011-07-29 04:10:07 PDT
richardigp's comment points to a workaround for some of this functionality until it is implemented:

<table><tr><td style="column-break-inside: avoid;">(non-breaking content here</td></tr></table>

Very definitely a hack, but should be forward-compatible unless a browser supports splitting table cells between columns without supporting column-break-inside.
Comment 5 Robert O'Callahan (:roc) (email my personal email if necessary) 2011-09-01 20:26:04 PDT
I think we should probably do this as part of bug 132035, or at least do bug 132035 first with this bug in mind.
Comment 6 David B. 2012-04-08 17:39:42 PDT

Also, instead of using:

<table><tr><td style="column-break-inside: avoid;">(non-breaking content here</td></tr></table>

Just use something like:

.column-fix {
        -webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	-o-column-break-inside: avoid;
	column-break-inside: avoid;
	display: table;

Again, it's a hack, but it makes your HTML much cleaner.
Comment 7 richardigp 2012-04-09 09:28:28 PDT
It's probably bad manners to drill things but I am not sure this is part of bug 132035. The issue is tables in columns is a flow layout paradigm not a page issue (or am I wrong?). Therefore tables should flow across the columns to reflect the layout intention of the author. The real issue is should header rows repeat on columns but that is probably a little too "printy". 

This is of concern to me/us because our XULRunner based ePub3 reader AZARDI (listed in XULRunner hall of honor) cannot present tables effectively in a controlled viewport/columns based presentation. Webkit handles table flow OK, although it too has some serious column flow issues. It is great to work with the native flow-power of the rendering engine rather than work around it.
Comment 8 EB 2012-10-03 14:50:22 PDT
Please fix this ASAP. It is causing people not to use the multi column function. I am trying to use for a mega menu and while it looks great in Safari and Chrome, it fails miserably in FF.
Comment 9 Asbjørn Riis-Knudsen 2012-11-12 05:58:30 PST
This needs to be fixed ASAP. How can one even think of implementing CSS Columns without the ability to control breaks? Regrettably, this is becoming typical of Mozilla as of late - implementing things half-way and then leaving them there (this bug was filed in 2010!). Microsoft got it right in IE10 (and without prefixes!). Do you want me to switch back to IE?
Comment 10 Robert O'Callahan (:roc) (email my personal email if necessary) 2012-11-12 12:01:15 PST
page-break-inside:avoid just landed on nightly builds.
Comment 11 Oliver Kohll 2012-12-17 08:34:38 PST
Excellent, thanks. Will this CSS avoid an element being broken up by a column as well as by a page?
Comment 12 EB 2012-12-17 09:02:22 PST
Comment 13 EB 2012-12-17 09:03:20 PST
(In reply to EB from comment #12)
> Thanks!!!! I hope it works for columns as well as pages!!!
Comment 14 EB 2012-12-17 09:05:33 PST
(In reply to EB from comment #13)
> (In reply to EB from comment #12)
> > Thanks!!!! I hope it works for columns as well as pages!!!
Just tested and it doesn't appear to work for columns :(
Comment 15 Oliver Kohll 2013-04-22 10:53:30 PDT
It does now - FF v20.0 :-)
Comment 16 Florian Bender 2013-09-05 14:08:46 PDT
Bug 775618 will alias some existing page-break-* properties. Does this fix (part of) the initial problem?
Comment 17 Florian Bender 2014-02-01 12:25:27 PST
Scott, still working on this?
Comment 18 Scott Johnson (:jwir3) 2014-02-03 07:33:42 PST
(In reply to Florian Bender from comment #17)
> Scott, still working on this?

Nope, I'm not working on this at the moment. Feel free to take it if you want. :)
Comment 19 Michal 2014-10-30 02:07:13 PDT
Temporary workaround is to add 'display:table' on element with 'page-break-inside' or just wrap it with table.
Comment 20 Sylvain Pollet-Villard 2014-12-05 01:09:50 PST
CSS multi-columns implementation is a mess between browsers. I came to this :

.column-fix {
	break-inside: avoid-column;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	-o-column-break-inside: avoid;
	column-break-inside: avoid;
	page-break-inside: avoid;
	display: table;

But display:table workaround causes issues on other browsers where break-* properties are well supported. So I have to specifically load a stylesheet for Firefox. This puts FF on the same level as IE from a web developer perspective :'(
Comment 21 mel 2015-08-18 04:14:44 PDT
FWIW, to completely prevent column breaks in Firefox, I've found that using the combination:

    display: inline-block;
    width: 100%;

seems to work better as a workaround than `display: table`, which more often interferes with other styles (eg. padding).

Note You need to log in before you can comment on or make changes to this bug.