截断列表项中的单个文本块

Question

我有一个项目列表，其中每个项目被分成3个部分。

<li>[long part(1)] [separator(2)] [important part(3)]</li> 

我想第一部分（“长部分”）截断而不是换行。

我可以得到第一部分不包装，而其他部分包装 - 但我无法弄清楚如何让浏览器截断第一部分。

这里有一个codepen例如：https://codepen.io/fiver/pen/rGRevq?editors=1010

使用Change view按钮输出窗格移动到侧面。然后，您可以使用滑块查看包装行为。我尝试使用flexbox（“flex try”）和样式溢出属性（“溢出尝试”），但都只是从视图中扩展文本。

第三项是我的解决方法（只是让它换行） - 这不是我想要做的，但它的工作原理。

那么有什么办法可以让第一部分截断（有或没有省略号）？

我只需要在现代浏览器中实现这一功能：Edge（不是实际出价），Chrome，Firefox和Safari（移动和桌面）。我不需要担心IE或Android浏览器。

Answer 1

你的“溢出尝试”的作品，但你需要把这些2 <li>

overflow: hidden; 
text-overflow: ellipsis; 

Answer 2

与您使用的跨度。您需要在CSS中设置display属性，并且还需要设置width。

span { 
     display: block; 
     overflow: hidden; 
     text-overflow: ellipsis; 
     white-space: nowrap; 
     width: 40%; /* it be upto requirment */ 
    }