你可以像下面这样尝试：

ul {
  margin: 0;
  padding: 0;
  white-space:nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 25px;
}

ul > li,
ul > li > div {
  display: inline;
}

ul > li {
  padding: 0 10px;
}

<ul>
  <li>
    <div>long text 1</div>
  </li>
  <li>
    <div>long text 2</div>
  </li>
  <li>
    <div>long text 3</div>
  </li>
  <li>
    <div>very very loooooong text content</div>
  </li>
</ul>

如果元素的数量始终是静态的，那么只使用CSS就可以实现，但是如果是动态的，那么就必须引入一些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;
  }
}

动态列表项数的通用JavaScript：

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";
  }
}

ul > li {
    display: inline-flex;
    height: 1em;
}
.clip {
    overflow: hidden;
    max-width: 144px;
}

<ul>
   <li>long text 1</li>
   <li>long text 2</li>
   <li>long text 3</li>
   <li class=clip>long long long long long long long long long long long long long long long</li>
</ul>