浏览器还不支持column-break-after吗？

Question

I have html markup like this:

<ul>
  <li>
    <h2>heading</h2>
    <img src="path.jpg" />
    <p>paragraph here</p>
  </li>
  <li>
    <h2>heading</h2>
    <img src="path.jpg" />
    <p>paragraph here</p>
  </li>
....
</ul>

And I'm using multiple column layout for this:

ul{
column-count: 3;
}

But it's breaking column from anywhere but I want to avoid breaking from anywhere. It should break from li tag only

So, I tried break-after https://developer.mozilla.org/en-US/docs/Web/CSS/break-after which seems not supporting. I'm using firefox 27.1.

---

I've tried a lot using prefixes too.

Answer 1

You should check out caniuse.com - a really useful place to see browser support for various HTML5 / CSS3 features.

A quick search on there shows the support for CSS3 multiple column layouts - http://caniuse.com/#search=column%20layout - it looks like Firefox has partial support but you need to use the -moz prefix.

Answer 2

Amazingly, I put display: inline-block to li then it is not breaking after anywhere it is just breaking after li only but I don't know why this is happening to work. And no need to use break-after.

Answer 3

page-break-after and its replacement break-after (which subsumes the function of both page-break-after and column-break-after) have both been supported for years now by Internet Explorer 10+, and also by Opera. It's only Chrome and Firefox that that are utterly broken in pagination support. Even Webkit supports the concept, naturally using its own special gleaming white syntax.

To the best of my knowledge, as an attribute in its own right column-break-after has only ever existed as -webkit-column-break-after , it has never been part of any CSS standard.

But hey, Internet Explorer is crap, right? It doesn't support standards unless they're completely irrelevant to the real world, like basic pagination control for printing business reports. Who would want to do that?