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

Question

I have a list of items, where each item is split up into 3 parts.

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

I want the first part ("long part") to truncate instead of wrap.

I can get the first part to not wrap, while the other parts wrap - but I can't figure out how to get the browser to truncate the first part.

Here's a codepen example: https://codepen.io/fiver/pen/rGRevq?editors=1010

Use the Change view button to move the output pane to the side. Then you can use the slider to see the wrapping behaviour. I tried using flexbox ("flex try") and styling overflow attributes ("overflow try") but both just extend the text out off the view.

The third item is my workaround (just let it wrap) - it's not what I want to do, but it works.

So is there any way I can get that first part to truncate (with or without ellipsis)?

I only need to get this working in modern browsers: Edge (not actually a bid deal), Chrome, Firefox and Safari (mobile and desktop). I don't need to worry about IE or Android browser.

---

Example of answer: https://codepen.io/fiver/pen/yEYWmp

Answer 1

Your "overflow try" works but you need to put these 2 in <li>

overflow: hidden;
text-overflow: ellipsis;

Answer 2

as you are using spans. you need to set display property in CSS and width too.

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