html - 显示列中包含超过 10 个元素的 HTML 列表

Question

我有一个生成的 HTML 文档，其中包含许多无序列表。大多数都相当短(例如，最多 5 个条目)，其中一些使用完整的段落作为列表条目。但是，有几个列表超过 20 个条目，而且都很短。我想将长列表显示为两列，但将短列表保留为单列。

例如，我想要列表

• 简短一些。
• 这是一个冗长、过于冗长的句子，可能会在狭窄的屏幕上环绕，如果被迫分成两列，肯定会环绕(可能不止一次)。
• 这是一些文字

显示为单列(如此处所示)，但用于列表

• 爱丽丝
• 鲍勃
• 卡罗尔
• 大卫
• 夏娃
• 弗兰克
• 葛丽泰
• 霍华德
• 伊尔玛
• 约瑟夫
• 凯瑟琳
• 狮子座
• ...

显示为两列。

不幸的是，我无法更改生成 HTML 的工具，而且我宁愿不添加后处理步骤。但是，我可以更改 HTML 加载的 CSS。有什么方法可以使用纯 CSS 实现这一点吗？

我真的不在乎分栏列表是从左到右然后从上到下，还是从上到下然后从左到右。

我尝试过使用 columns(及其特定于浏览器的变体)，但还没有发现任何方法不会强制将短列表放入列中。 :nth-child 可能会有所帮助，但我还不知道如何做。

编辑

一些生成的 HTML:

<ul>
<li>Composite:Aperture</li>
<li>Composite:DigitalZoom</li>
<li>Composite:DriveMode</li>
<li>Composite:FlashType</li>
<li>Composite:FOV</li>
<li>Composite:FocalLength35efl</li>
<li>Composite:HyperfocalDistance</li>
<li>Composite:ImageSize</li>
...
</ul>

这只是一个基本的、未修饰的列表。

Answer 1

如何使用 CSS3 创建列并使用 JQuery 检查文本的长度。

JSFiddle

CSS

.two-col {
    -webkit-column-count:2; /* Chrome, Safari, Opera */
    -moz-column-count:2; /* Firefox */
    column-count:2;
}

JQuery

$(document).ready(function(){
    $( 'li' ).each(function() { // check each li on the page (or set a class only to the li's you want to check)
        var textLength = $(this).text().length; // use text so HTML elements are not accounted for
        if(textLength >= '200'){ // change 200 to the number of characters required before applying class
            $(this).addClass('two-col'); // class name to be added
        }
    });
});