HTML li 元素单行显示并添加省略号

在 HTML 中，你可以使用 CSS 来控制 li 元素的文本只显示一行，并在超出一行时添加省略号。可以通过以下步骤实现：

1. 首先，给 li 元素添加一个固定的宽度，这样文本就不会自动换行。可以使用'width' 属性来设置宽度，例如：'width: 200px;'
2. 然后，使用 CSS 的'white-space' 属性来控制文本的显示方式。将其设置为'nowrap'，这样文本就不会换行。例如：'white-space: nowrap;'
3. 最后，使用 CSS 的'overflow' 和'text-overflow' 属性来添加省略号。将'overflow' 设置为'hidden'，这样超出一行的文本部分就会被隐藏起来。然后将'text-overflow' 设置为'ellipsis'，这样在超出一行时会显示省略号。例如：'overflow: hidden; text-overflow: ellipsis;'

以下是一个示例代码：

<style>
  li {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

<ul>
  <li>这是一行很长的文本，超过一行的部分会显示省略号。</li>
  <li>这是另一行很长的文本，同样会被省略号截断。</li>
</ul>

在上面的示例中，li 元素的宽度被设置为 200px，超过一行的文本会被隐藏并显示省略号。你可以根据需要调整宽度和其他样式。