在 CSS 列属性中均匀分布文本答案

【问题标题】：Equally distribute text within CSS column property在 CSS 列属性中均匀分布文本
【发布时间】：2015-05-21 00:35:08
【问题描述】：

我使用 CSS 列属性将文本分成 4 列，结果类似于 this

现在我想做的是以一种我可以得到类似this的方式平均分配文本

代码：

#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>

【问题讨论】：

到目前为止你尝试过什么代码？（您可以使用“代码片段”按钮添加代码。或者您可以创建一个JSFiddle 来展示您的尝试。）
我建议在文本中放置分隔符（例如 <br class="delimiter" /> 之类的虚拟元素）并在 css 中使用它们来根据需要分隔文本，分隔符可以手动放置，甚至可以使用 javascript 计数文本长度等
@jsve 有我正在使用的代码，如果它可以用 javascript 或 jquery 完成，我没有问题，但我想尽可能简单
@NikosM。是的，这听起来可能可行，您介意提供示例吗？虽然它不会引发如何在列内平均分配分隔符的问题？
@MarcoCastro，嗯，这是一个提示，现在没有时间，如果到那时还没有找到答案，可能明天晚些时候

标签： javascript html css multiple-columns

【解决方案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;
}

【讨论】：

那不是 OP 的问题。
比你想的那样，但它不能解决我的问题，我需要文本在列之间平均分布，知道如何做到这一点吗？
@MarcoCastro 你看过列填充规则了吗？ w3.org/TR/css3-multicol/#cf 我正在尝试将其设置为“平衡”，它似乎在平衡列方面做得很好。如果您不是，我正在使用 Chrome 42，也许您看到的是浏览器差异。