在CSS列属性中平均分配文本

Question

我使用CSS column属性将文本分为4列，结果是这样的

现在我想这样做是平均分配的方式的文本，我可以得到的东西像这样

码：

 #container { background: rgba(255, 237, 0, 1.00); width: 100%; -webkit-column-count: 4; -webkit-column-gap: 15px; -webkit-column-rule: 2px solid lightblue; -moz-column-count: 4; -moz-column-gap: 15px; -moz-column-rule: 2px solid lightblue; column-count: 4; column-gap: 15px; column-rule: 2px solid lightblue; } 

 <section id="container"> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </section> 

Answer 1

您可能会遇到浏览器支持问题。 请访问http://caniuse.com/#search=columns，以了解当前受支持的列的情况。

请参阅此Jsfiddle以获取带有浏览器前缀的示例，该前缀似乎可以满足您要求的https://jsfiddle.net/82dnb1ab/

#container {
  background: rgba(255, 237, 0, 1.00);
  width: 100%;
  -webkit-column-count: 4;
  -webkit-column-gap: 15px;
  -webkit-column-rule: 2px solid lightblue;
  -moz-column-count: 4;
  -moz-column-gap: 15px;
  -moz-column-rule: 2px solid lightblue;
  column-count: 4;
  column-gap: 15px;
  column-rule: 2px solid lightblue;
}