Question

您可以为CSS3多列添加最小高度吗？

当文本只有四行而不是强制一行到第二列时，我宁愿只有一个列。

例如，我宁愿：

Lorem ipsum dolor sit amet
sodales id ipsum ipsum mauris
interdum qui congue
nisl quis, turpis tristique

不是这个：

Lorem ipsum dolor sit amet      nisl quis, turpis tristique
sodales id ipsum ipsum mauris 
interdum qui congue

有什么建议吗？

Answer 1

没有最小高度，但是在列开头的段落末尾的最小行数称为orphans（并且相应的......行自己在...段落的开头是widows）。这些是CSS属性，哪些列应该根据spec来表示，但我已经在Chrome中进行了快速测试，但没有任何区别。所以我想我们必须等待这个实现。

应如何设置的示例：

p.columns {
    column-count: 2;
    orphans: 3
}

Answer 2

我尝试使用此代码示例解决此问题

columns: 3;
orphans: 4;
column-fill: auto;

添加最小高度可能会给小型移动设备带来一些问题。因此，我通过 orphans 设置了最小行数，并将第 1 列设置为 column-fill: 来填充 auto。我在这里添加了示例 UI 来看看。谢谢。

body {
  background: #1C1B1B;
  color: white;
  font-family: "Roboto";
  font-size: 16px;
  padding: 20px;
}

.data {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  orphans: 4;
  column-fill: auto;
}

.demo-balance {
  column-fill: balance;
  columns: 2;
  -webkit-columns: 2;
  -webkit-column-fill: balance;
  -moz-columns: 2;
  -moz-column-fill: balance;
}

<p>Sample 1</p>

<p class="data">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus libero libero, placerat at hendrerit nec, vulputate consectetur nisi. Morbi scelerisque lectus id sapien laoreet accumsan. Nunc eget tincidunt ligula, eget suscipit tellus. </p>


<p>Sample 2</p>

<p class="demo-balance">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus libero libero, placerat at hendrerit nec, vulputate consectetur nisi. Morbi scelerisque lectus id sapien laoreet accumsan. Nunc eget tincidunt ligula, eget suscipit tellus. </p>

Answer 3

IE 10和Firefox现在支持列中的最小高度。然而，在Webkit中，文本溢出到容器外部的右侧，正如这两个bug报告中已经解释的那样 Bug#55740 Bug#65691

Answer 4

我知道，这是一个旧的。但在我的研究中，这个主题首先出现，所以我最好分享我的结果。有一个名为column-count: 2; column-width: auto; column-fill: auto;的{{3}}属性可以实现您和我所寻找的内容。部分意味着，您应该使用特定于浏览器的前缀......

export class SettingService{
  constructor(private _http:http){}

  isLoaded:boolean = false;

  public getSetting():Promise {
    if(this.isLoaded) {
      return Promise.resolve();
    }
    return this._http.get('someAPI')
    .map((result)=>{return result.toJSON()})
    .do((data:any)=> {
      localStorage.setItems("settings",json.stringify(data))
      this.isLoaded = true;
    })
    .toPromise();
  }
}

以下是partial supported

为CSS3多列添加最小高度

4 个答案: