title: How to prevent column break within an element?
body: <p>Consider the following HTML:</p>
  
  <pre><code>&lt;div class='x'&gt;
      &lt;ul&gt;
          &lt;li&gt;Number one&lt;/li&gt;
          &lt;li&gt;Number two&lt;/li&gt;
          &lt;li&gt;Number three&lt;/li&gt;
          &lt;li&gt;Number four is a bit longer&lt;/li&gt;
          &lt;li&gt;Number five&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the following CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.x {
      -moz-column-count: 3;
      column-count: 3;
      width: 30em;
  }
  </code></pre>
  
  <p>As it stands, Firefox currently renders this similarly to the following:</p>
  
  <pre><code>• Number one    • Number three          bit longer
  • Number two    • Number four is a    • Number five
  </code></pre>
  
  <p>Notice that the fourth item was split between the second and third column. How do I prevent that?</p>
  
  <p>The desired rendering might look something more like:</p>
  
  <pre><code>• Number one    • Number four is a
  • Number two      bit longer
  • Number three  • Number five
  </code></pre>
  
  <p>or</p>
  
  <pre><code>• Number one    • Number three        • Number five
  • Number two    • Number four is a
                    bit longer
  </code></pre>
  
  <p><strong>Edit:</strong> The width is only specified to demonstrate the unwanted rendering. In the real case, of course there is no fixed width.</p>