Einen einzelnen Textblock innerhalb eines Listenelements abschneiden

Question

Ich habe eine Liste von Elementen, wobei jedes Element in 3 Teile aufgeteilt ist.

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

Ich möchte der erste Teil ("long Teil") statt wrap gestutzt.

Ich kann den ersten Teil nicht umwickeln, während die anderen Teile wrap - aber ich kann nicht herausfinden, wie der Browser den ersten Teil abgeschnitten bekommen.

Hier ist ein codepen Beispiel: https://codepen.io/fiver/pen/rGRevq?editors=1010

Verwenden Sie die Change view Taste, um den Ausgabebereich zur Seite zu bewegen. Dann können Sie den Schieberegler verwenden, um das Umbruchverhalten anzuzeigen. Ich habe versucht, flexbox ("flex try") und Styling Überlauf-Attribute ("overflow try") zu verwenden, aber beide erweitern nur den Text aus der Ansicht.

Das dritte Element ist meine Abhilfe (einfach wickeln) - es ist nicht das, was ich tun möchte, aber es funktioniert.

Also gibt es eine Möglichkeit, den ersten Teil zu schneiden (mit oder ohne Ellipse)?

Ich muss nur in modernen Browsern arbeiten: Edge (nicht wirklich ein Angebot), Chrome, Firefox und Safari (Handy und Desktop). Ich brauche mir keine Sorgen um den IE- oder Android-Browser zu machen.

Answer 1

Ihre "Überlauf try" funktioniert, aber Sie müssen diese 2 in <li>

overflow: hidden; 
text-overflow: ellipsis; 

Answer 2

setzen, wie Sie Spannweiten verwenden. Sie müssen display Eigenschaft in CSS und width auch festlegen.

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