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:

Example of Box HTML:

<div class="box">
        <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>

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.



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:

    CSS Howto..

    How use a -ms-expand in GWT (Google Web Tolkit)

    CSS question how to make one div appear over another?

    How to avoid CSS conflict using jquery?

    How to reserve a DIV width with “left:100%” CSS rule

    How to move a span to a different position in a DIV

    How can I escape string css in sass/scss?

    How use Append Jquery

    How to fix the top row and first column in a webpage, with only CSS

    How can I change the numbering of an order list's items?

    Horizontal navigation menu - how to increase size of
  • on hover
  • How to target items

    How to add more items to the list without going to the next row? [closed]

    How to insert database values into the template stylesheet?

    How Do I set this PHP printed HTML form to stay within


    How to expand textarea to fit text vertically and horizontally?

    using css, how to position image so when resizing window, image will not move

    HTML & CSS: How to style an HR tag to have a title embedded in it

    How to create an email template from a responsive website?

    How to make padding:auto work in CSS?

    How do I target a div without a class or id but with all these specific style-attributes

    How to make one div's height depended of another div's height?

    How do I scroll d3 elements while keeping a portion of the svg in a fixed position?

    How to make an element stretch to the same height as its container?

    How to detect if html contains block level elements using jQuery?

    How to make CSS triangles (with borders) compatible across browsers

    How to include a google map in an application

    How to use CSS with Django forms?

    How can I make a button change its position after being clicked?

    How to make the table use multiple lines on long text using css

    How to re-size and crop an image client side while maintaining the aspect ratio