在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;
}