Issue
I am a hobby coder working on a personal website, learning as I go. As a sort of index page, I've created an alphabetized list split across multiple columns, with subsections for each letter. I wanted to avoid having these subsections split across columns; e.g., keeping the "B" subheader and all of the entries starting with "B" in the same column, either by pushing the column break forward or back.
It seemed like applying the CSS property break-before: avoid-column;
to the <li>
elements would do the trick, and in Edge and Chrome it's working the way I had hoped. However, I primarily use Firefox, where this seems to have no effect. My Firefox is up to date (v 121.0.1) and everything I can find online says this property should be supported in this version, so I'm kind of stumped. Any insight on what might be going on and how I could work around it?
CSS
.index-list {
column-width: 150px;
}
.index-list li {
break-before: avoid-column;
}
HTML
<ul class="index-list" ">
<h2>A</h2>
<li>Anteater</li>
<li>Apple</li>
<li>Asteroid</li>
<h2>B</h2>
<li>Bouncy Ball</li>
<li>Bumblebee</li>
<li>and so on...</li>
</ul>
Solution
Click here on MDN! and click the tab on the right named:
browser_compatibility
It seems like Firefox supports the property break-before
, but it doesnt support avoid-column
so far(2024/1/15), which marked by red "×".
Answered By - Haishen
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.