拆分将在多列上显示的内容

Question

情境：

您有一个CMS，用户可以在其中确定要显示的内容。 内容由多个列组成，其下方有链接。它看起来像这样：

列名
link1 link2 link3 link4
link5 link6 liiiiiiiiiiiiiiiiiink7
link8 liiiink9 liiiiiiink10

列名2
link1 link2 link3 link4
link5 link6 liiiiiiiiiiiiiiiiiink7
link8 liiiink9 liiiiiiink10
列名3
link1 link2 link3 link4
link5 link6 liiiiiiiiiiiiiiiiiink7
link8 liiiink9 liiiiiiink10

列名4
link1 link2 link3 link4
link5 link6 liiiiiiiiiiiiiiiiiink7
link8 liiiink9 liiiiiiink10

当此列表太长时，内容将分为2列。 现在内容将被拆分 - ＆gt;在mozilla中使用css3，在IE中使用JQuery库，其中有类似的东西。

CSS

.columns {
 -moz-column-count: 2;
 -moz-column-gap: 30px;
 -webkit-column-count: 2;
 -webkit-column-gap: 30px;
 column-count: 2;
 column-gap: 30px;
}


### WEB FORM
<!--[if lte IE 9]>
<script src="/Estate/Scripts/Libraries/autocolumn.min.js" type="text/javascript"></script>
<script type="text/javascript">
 if (Estate.Sitefinity.IsInEditMode() == false) {
  jQuery('#MultiColumn').columnize({
   columns: 2,
   buildOnce: true
  })
 }
</script>
<![endif]-->

如您所见，这是在客户端处理的，这样做的效果是文本将被拆分而不确保列不会被拆开。

这是效果：

所以这现在解决了客户端，因此内容将被打破并分成2列。 有没有什么好方法可以解决这个服务器端有2个漂亮的列和一些逻辑来确定列具有相似的高度？ 你会如何解决这个问题？

Answer 1

如果你的字体是等宽字体（所有字符具有相同的宽度）你可以计算字符，按顺序计算每列中相同数量的字符。但是，因为你的字体很可能不是等宽字体（因为它很丑陋）。该方法将根据文本产生不同的结果。

我认为css3和JS Fallback是实现它的好方法。

Answer 2

考虑到你对Hannes的回答的评论，服务器端的最佳方式是按组分割内容（即像你的“centrum senioren”这样的东西将构成一个组。删除标记到避免倾斜结果，并计算每个组的字符。使用它可以获得关于在哪里放置列分隔符的经验法则。

我同意上一张海报;客户端是一个更好的处理这个问题的地方。尝试在CSS中使用column-break-inside: avoid组。

Answer 3

在服务器端执行此操作的唯一方法是计算字符/单词/链接并将分割到中间某处，但这只会给您一个近似值。如果你的文字足够长就足够了。

从我在图片中看到的带有橙色文字的内容中，您可以在狭窄的列中找到长词。这意味着如果拆分服务器端，您将遇到重大变化。