如何对 <ul><li> 结构中的溢出列表项应用省略号效果？

Question

我有一个包含

<ul><li>

元素的列表，但有时，

<li>

项目不适合

<ul>

容器。我需要以模仿文本溢出的方式显示它们：省略号；影响。但是，由于这些不是纯文本元素，因此我无法直接对它们应用文本溢出。如何截断这些元素？

• 我已经尝试过

  overflow: hidden

  ，但这并没有像省略号中的类似那样在末尾添加...。我需要证明该列表还有更多内容。

Answer 1

使用CSS你可以实现这个。

ul { list-style-type: none; padding: 0;}



 li {
white-space: nowarp;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
border: 1px solid #ccc;
padding: 5px;
}