Hi, connoisseurs.

I am making up a catalog of goods with a rather ornate system of sections and subsections, and I ran into such a task.

There is a list of sections with subsections. These subsections can be as many as you like, and maybe not at all. So we must somehow limit the number of subsections shown.

I will explain. If the number of subsections fits into 2 lines, then everything is OK, and if not, then what did not fit should be hidden and at the end add the "more" link. Something like that.

I will be glad to any help.

    2 answers 2

    for ul, specify overflow: hidden

    • it is clear that overflow: hidden will hide what did not fit, but how to add / remove the reference "still" if it did not fit / climbed ... the main question is this - fenris

    Something like this, here is an example of jsfiddle

    var i = 0; $( "li" ).each(function() { i++; if(i > 2){ $(this).hide(); } }); if(i > 2){ $("<li><a href='#'>Еще</a></li>").appendTo($("ul")); }
    • Not quite that ... I, apparently, explained not entirely accurate. These <li> can be as many as you like and stretched to the full width of the block in a line. The height of the block is 2 lines. Exactly if the number <li> does not fit into these 2 lines, then the “more” link should be added. Something like this jsfiddle.net/3gSp7/1 Everything that goes beyond the boundaries of the block should hide behind the link yet - fenris
    • @fenris, can it be easier like this: jsfiddle.net/3gSp7/2 ? - zb '
    • It's easier, of course, but you just need to add the “More” link and expand it by click. - fenris