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

显示列中包含10个以上项目的HTML列表

1 个答案: