如何确保列表项的文本只有一行？

.list-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

var listItem = document.getElementsByClassName('list-item');
for (var i = 0; i < listItem.length; i++) {
  var text = listItem[i].innerText;
  var maxLength = 20; // 设置最大字符长度
  if (text.length > maxLength) {
    listItem[i].innerText = text.substring(0, maxLength) + '...';
  }
}

@media screen and (max-width: 480px) {
  .list-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}