Kann die Inline-Blockierung von Elementen auf neue Zeilen umbrechen?

Question

Ich habe eine Reihe von Details innerhalb einer ungeordneten Liste, die ich inline anzeigen möchte. Das Problem, das ich habe, ist, dass für einen relativ kleinen Bereich einige der Listenelemente ziemlich lang sind.

Dies ist die ul ich meine Ansicht anhängt bin:

"<ul class='details'>" + 
    "<li>" + val.Director + "</li>" + 
    "<li>" + val.Country + "</li>" + 
    "<li>" + val.Year + "</li>" + 
    "<li>" + val.Genre + "</li>" + 
    "<li>" + val.Runtime + "</li>" + 
"</ul>" 

Und das ist mein CSS:

.details { 
    list-style: none; 
    display: inline-block; 
} 
.details li { 
    float: left; 
} 

.details li:after { 
    padding: 10px; 
    content: "|"; 
} 

.details li:last-child:after { 
    padding: 0; 
    content: ""; 
} 

, die die folgenden (ca. erzeugt vier Textzeilen bei der Betrachtung auf. ein iPhone):

JOHN FORD | USA | 1956 | ABENTEUER, DRAMA, WESTERN | 119 MIN

Das Wort Umbruch ist unvorhersehbar. Hier ist der Auslöser, um die volle Wirkung zu erzielen: https://plnkr.co/edit/PkkNOKojOSA8O1oXw50d?p=preview (Sie werden sehen, dass es große Mengen an Leerraum gibt, der von der Bildschirmbreite beeinflusst wird).

Ich möchte, dass diese lis die volle (nicht spezifizierte) Breite des divs, in dem sie enthalten sind, ausfüllt und nur zur nächsten Zeile umblättert, wenn auf der rechten Seite (als wäre der Text von links nach rechts geschrieben worden) ein einzelnes div). Da jedoch | und padding nach jedem Listenelement ist für die Präsentation notwendig, und kurz alle meine Werte in eine einzige Spanne oder div zu setzen und eine Menge von   zu verwenden, kann ich nicht denken, wie es geht.

Alle Tipps geschätzt! Vielen Dank!

Answer 1

ändern .details li Regel aus

float: left; 

zu

display: inline; 
word-wrap: break-word; 

und der li verhalten als Zeichen

Updated plnkr

---

aktualisieren basierend auf Kommentar

Updated plnkr ver. 2

ich die ul/li Graben würde und einfache span ‚s verwenden und dieses Markup

 "<div class='details'>" + 
     "<span>" + val.Director + "</span>" + 
     "<span>" + val.Country + "</span>" + 
     "<span>" + val.Year + "</span>" + 
     "<span>" + val.Genre + "</span>" + 
     "<span>" + val.Runtime + "</span>" + 
     "</div>" + 

und diese CSS

.details { 
    font-size: 1.4em; 
    text-transform: uppercase; 
    display: inline-block; 
} 

.details span { 
    word-wrap: break-word; 
} 

.details span ~ span:before { 
    padding: 0 5px; 
    content: " | "; 
} 

verwenden