Html – How can I hide <li> instead of wrapping <li> to a new line

If the number of elements is always static, it can be accomplished using only CSS, but if it’s dynamic, you’ll have to introduce some JavaScript.

HTML:

<ul id="my-list-id" class="my-list">
  <li>Child one</li>
  <li>Child two</li>
  <li>Child three</li>
  <li>Child four</li>
  <li>Child five</li>
</ul>

CSS (flexbox + media queries):

.my-list {
  display: flex;
  flex-direction: row;
}
.my-list > li {
  flex-wrap: nowrap; /* Assures there's no wrapping at any given point regardless of screen size. */
  margin-left: 4px;
}

/* Phone */
@media only screen and (max-width: 386px) {
  /* Assuming you always only need the first child to be visible
    For an unknown STATIC number of children, use 'li:not(:nth-child(NUM_OF_CHILDREN_VARIABLE))'
    For an unknown DYNAMIC number of children, set the 'NUM_OF_CHILDREN_VARIABLE' via JavaScript. */
  .my-list > li:not(:first-child) {
    display: none;
  }
}
/* SD - Included for testing and as intermediary between phone resolution and full HD resolution,
  which you should probably have. */
@media only screen and (min-width: 387px) and (max-width: 1079px) {
  /* Assuming you always only need all but the last to be visible. */
  .my-list > li:last-child {
    display: none;
  }

  /* For an unknown STATIC number of children, use 'li:nth-last-child(-n+NUM)' where 'NUM'
    represents the last few items you do NOT wish to be visible.
    For an unknown DYNAMIC number, set the 'NUM' via JavaScript. */
  /*.my-list > li:nth-last-child(-n+NUM) {
    display: none;
  }*/
}
/* HD */
@media only screen and (min-width: 1080px) and (max-width: 2159px) {
  /* Assuming you always only need all but the last to be visible. */
  .my-list > li:last-child {
    display: none;
  }

  /* For an unknown STATIC number of children, use 'li:nth-last-child(-n+NUM)' where 'NUM'
    represents the last few items you do NOT wish to be visible.
    For an unknown DYNAMIC number, set the 'NUM' via JavaScript. */
  /*.my-list > li:nth-last-child(-n+NUM) {
    display: none;
  }*/
}
/* 4k - Assures all list items are visible. */
@media only screen and (min-width: 2160px) {
  .my-list > li {
    display: inline-block;
  }
}

General JavaScript for dynamic number of list items:

let children = 5;

let myList = document.getElementById("my-list-id");
let listChildren = myList.children;

for (var i = 0; i < children; i++) {
  // First five children of type 'list item'
  if (listChildren[i].tagName == "li") {
    listChildren[i].style.display = "none";
  }
}