截斷列表項中的單個文本塊

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 */ 
    }