I have hours trying to figure out how to avoid this bullet points at the bottom being cutted when the text is too long, the container of the unordered list has a max height of 200px and the list has 3 columns. The list overflows the container, but my question is that if it's possible to automatically arrange only the list items that fit that 200px container and maybe hide the rest, avoiding cutting the text?

Here's a little demo: https://jsfiddle.net/djyu7s2w/12/

<div >
  <ul >
    <li >
      <p>I'm a list item</p>
    </li>
  </ul>
</div>

.wrapper {
  max-height: 200px;
  overflow: hidden;
  border: 2px solid red;
}

.list {
  column-count: 3;
  column-gap: '4rem';
  margin: 0;
}

.list-item {
  text-align: 'left';
  margin: 0 0 32px 0;
}

CodePudding user response：

I don't think what you want to do is possible.

You could do one of the following:

• Set a min-height: 200px on the wrapper so the wrapper grows if the <ul> exceeds 200px
• Set overflow: scroll; on the wrapper so the wrapper has a scroll bar.
• Set text-overflow styles on the <li>s so that text is limited to one or 2 lines

CodePudding user response：

The only way to make this work is to set media-query(s) when the text overflows outside of the max-width: 200px; I found that your text goes outside of the container at 512px so I set a media-query instructing the text to go to x-small at the screen width. However, this makes the text barely legible.

I also removed the default margin on p and the margin you set on li.

What I would do is either change overflow: hidden; to scroll; so that you can still view the text in the container or use min-height: 200px; on the container so that the container resizes accordingly.

.wrapper {
  max-height: 200px;
  display: flex;
  overflow: hidden;
  /* overflow-y: scroll; */
  flex-wrap: wrap;
  border: solid 1px;
}

.list {
  column-count: 3;
  column-gap: '4rem';
  margin: 0;
}

.list-item {
  text-align: 'left';
}

p {
  margin: 0;
}

@media only screen and (max-width: 512px) {
  html {
    font-size: x-small;
  }
}

<div>
  <div >
    <ul >
      <li >
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
        </p>
      </li>
      <li >
        <p>Sed ut perspiciatis unde omnis iste natus</p>
      </li>
      <li >
        <p>At vero eos et accusamus</p>
      </li>
      <li >
        <p>Sed aliquam, magna placerat semper</p>
      </li>
      <li >
        <p>Aliquam ullamcorper sagittis</p>
      </li>
      <li >
        <p>Nam ac fringilla nunc, a congue quam</p>
      </li>
      <li >
        <p>Quisque maximus pharetra est, ac tristique nisl mollis egestas</p>
      </li>
      <li >
        <p>Proin pulvinar dui</p>
      </li>
      <li >
        <p>Duis vel sollicitudin</p>
      </li>
    </ul>
  </div>
</div>