How can I hide the extra list items that don't fit within a fixed-height box?


Tags: html,css,html-lists,overflow

Problem :

I have boxes that contain <ul> list content. These boxes have a slightly variable width but have a fixed height. This list content is dynamically generated containing anywhere from 0 - 200 list elements. However, because of the box height, I usually can display only 3-5 at a time. This is OK.

However, I have been artificially restricting those lists by using ASP.NET MVC code to only display the first 4 elements. This works in about 90% of cases - some boxes will still have overflow if all of the list items have a lot of text (see below).

Example of overflow problem

I was wondering if there was a way in CSS to use like the overflow property or something and hide the list elements that don't fit? I have tried overflow: hidden on the <ul> to no avail. I imagine this is because the list doesn't know the height of the box that is is in or something

Clarification: Ideally, you wouldn't see any part of the <li> that doesn't fit. See this fiddle

I don't know how long any of these items will be ahead of time or how many elements their might even be, and the width/height of the box are not modifiable. Any ideas?

Original Fiddle: http://jsfiddle.net/emowbngx/1/

Example of Box HTML:

<div class="box">
    <ul>
        <li>List item</li>
        <li>these LI's are dynamically generated</li>
        <li>I have no idea of their length ahead of time</li>
        <li>Seth Rollins</li>
    </ul>
</div>

Box CSS:

.box {
    height: 110px;
    width: 350px;
    min-width: 350px;
    float: left;
    margin: 8px 16px 8px 0;
    position: relative;

    border: 1px solid black;
}


Solution :

I may have found a way to do this using a pure CSS solution. It involves using flexbox and a bit of cheating to show the bullet using a :before pseudo element. It even allows centering visible li elements vertically inside the container.

fiddle: https://jsfiddle.net/aq34sb17/2/

CSS

ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100px;
    max-width: 180px;
    overflow: hidden;
    padding-left: 15px;
    justify-content: space-around;
}

li {
    display: block;
    width: 100%;
    padding-left: 10px;
    position: relative;
}

li:before {
    content: '\2022';
    position: absolute;
    left: -5px;
}

and here's the solution applied to your fiddle: http://jsfiddle.net/emowbngx/7/


    CSS Howto..

    How to add jQuery file to navigation website?

    parse JSON to HTML table: How do I format the css of the table?

    How to center-zoom with responsive images without affecting the image size?

    how can I center button below my text while using bootstrap css?

    Modernizr: how do I detect CSS display:table-cell support?

    How to edit css live with ie6

    How to format text using CSS

    How to align 3 divs with CSS retaining relative position while scaling window

    How to override css cursor property of a hovered button?

    How to make css style on Google custom search engine

    HOW to combine two element that has different parent in CSS? [duplicate]

    how to position two divs next to each other, one of them is centered in the container of both divs

    [HTML][CSS] How to change opacity of background-image but not the text on it?

    how to use struts form fields (s:textfield, s:password) and style them using materializecss framework?

    How do I fix a Wordpress meta box that's blown out by it's content?

    responsive image gallery with different heights - how to achieve this with css (or jquery)

    How can you do this in CSS

    stopping slideshow and continue after 3 seconds

    How to add content to an input with css? [duplicate]

    How to achieve this CSS layout? [closed]

    HTML/CSS/jQuery: How to set an “absolute text bottom” so that further text expands upwards?

    How are CSS frameworks used?

    How to increase-decrease the number (i.e. 0, 1,4..) size in CSS?

    How do you contain and position an input with a div?

    How to group CSS/Javascript button behaviour? [closed]

    How to vertically align a list on one item, with HTML/CSS/JavaScript?

    Using two buttons on one div, how do you fade in slowly then fade out?

    How do I find out which style is overriding another style?

    CSS: how to remove the indent of list items shown in Firefox

    Angularjs - bind value from directive to ng-show/hide anywhere in document