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..

    Weird CSS effect with box shadows - how to solve?

    How do I use CSS animations to slide a fixed position element from the bottom of the page to the top?

    HTML5/CSS3 how to force text to require a certain width for rendering

    Show/Hide images based on tab selection

    How do i apply scroll for long horizontal background image?

    How to center a span in a div

    Two navbar-inner on the same page how to change the padding of each?

    How to customize the look and feel of rich faces tab panel

    How to create a rounded rectangle shape Css?

    how to give css for arranging label, textbox and text area side by side in the same line

    How to create a WordPress theme that use BootStrap?

    Tab menu in CSS - how to set an active tab

    How to use css to style xhtml markup made only of divs like a table [closed]

    How to set color on mouse hover - css

    How do i center the navigation menu and logo men using float?

    How to change URL inside CSS?

    How to force span to use parent font-family in CSS

    How to vertically align a form and image

    How to make css menu width impossible to change when zooming or changing resolution?

    how to make this slide menu work

    Beginner's stuff: How to stop CSS' Divs from overlapping?

    How can i make this css star smaller?

    How to create custom buttons with arrows for twitter bootstrap?

    How can I make a full width videojs v5 progress bar?

    How to prevent the button from submission the form after sending it?

    How to position the whole site? css positioning problem [closed]

    css 3d animation, how?

    How to get the correct mouse position in relation to a div that has has a scale transform applied

    How do I switch external CSS files?

    How do you apply diferent colors from diferent css rules to the same object?