<ul>
  <li>短いテキストはそのまま</li>
  <li>長いテキストはほどよいところで省略しちゃうよー</li>
  <li>表示するスペースに制限がある時に便利ですね</li>
</ul>

ul {
  list-style-position: inside;
}
li {
  width: 320px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}