如何防止列表中的项目溢出到下一列？

Question

我想将以下html列表分为几列：

<ul class="comparison-card-list">
  <li>Proferssional Photos</li>
  <li>Pricing Guidance</li>
  <li>Listing Descriptions</li>
  <li>Professional Signage</li>
  <li>Market Analysis</li>
  <li>MLS Listing</li>
  <li>Open House Coordination and Hosting</li>
  <li>Manage Showings</li>      
  <li>Placement on Company Offer Marketplace</li>
  <li>Negotiation Assistance, including assessing buyers and their qualifications</li>
  <li>Requisite property disclosures</li>
</ul>

以及将列表分为几列的类：

.comparison-card-list {
  column-count: 3;
  column-gap: 20px;
}    

如果您查看我的Codepen，在某些宽度（例如650像素到830像素）处，一些列表项（例如，在公司产品市场上的展示位置）会溢出到下一个列，而不是换行到下一行。

如何强制它换行到下一行，而不是溢出到下一行？

P.S。在@Helenesh的协助下，此问题仅在Firefox中存在。

P.P.S。根据{{​​3}}，该规范指出，除非指定了page-break-inside: avoid，否则允许浏览器自由地随意破坏内容。

Answer 1

有一个CSS属性可以解决此问题。在page-break-inside: avoid;元素上使用li。使用avoid可以防止列“溢出”。

.comparison-card-list > li {
  page-break-inside: avoid;
}

来自CSS Tricks：

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */

Answer 2

这是我可能会被嘘的非常规黑客。但是，如果有效，它就会起作用。另外，我无法重现您的问题。但是，无论出于何种疯狂原因，这都可能为您解决。在进行下面的修正之前，您可能应该在其他设备上测试页面。

将div和class环绕字段跳转到另一列。并调整1％的宽度，直到固定为止。使用智能修复程序或哑巴修复程序。

***智能修复

 li{
    display: inline-block;
 }

***哑巴修正

HTML

<ul class="comparison-card-list">
  <li>Proferssional Photos</li>
  <li>Pricing Guidance</li>
  <li>Listing Descriptions</li>
  <li>Professional Signage</li>
  <li>Market Analysis</li>
  <li>MLS Listing</li>
  <li>Open House Coordination and Hosting</li>
  <li>Manage Showings</li>      
  <div class="fix"><li>Placement on Company Offer Marketplace</li></div>
  <li>Negotiation Assistance, including assessing buyers and their qualifications</li>
  <li>Requisite property disclosures</li>
</ul>

样式

.fix {
 width:1%;
}

Answer 3

没有Flexbox无法解决的问题！

尝试一下：

https://codepen.io/cloudulus/pen/Nowdaa

.comparison-card-list {
  display: flex;
  justify-content: space-between;
}
.comparison-card-list > div
{
  display: flex;
  flex-direction: column;
  flex-basis: 33.3%;
}
.comparison-card-list > div > div
{
  display: list-item;
  list-style-position: inside;
}

<div class="comparison-card-list">
  <div>
    <div>Proferssional Photos</div>
    <div>Pricing Guidance</div>
    <div>divsting Descriptions</div>
    <div>Professional Signage</div>
  </div>
  <div>
    <div>Market Analysis</div>
    <div>MLS divsting</div>
    <div>Open House Coordination and Hosting</div>
    <div>Manage Showings</div>    
  </div>
  <div>
    <div>Placement on Company Offer Marketplace</div>
    <div>Negotiation Assistance, including assessing buyers and their quadivfications</div>
    <div>Requisite property disclosures</div>
  </div>
</div>