インラインブロックで項目を改行することができますか？

Question

私はインラインで表示したい順序のないリストの中に一連の詳細を持っています。私が持っている問題は、比較的小さなエリアでは、リスト項目のいくつかがかなり長いことです。

これは私が私のビューに追加していますULです：

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

そして、これが私のCSSです：

で見たときに、テキストの約（次の4行を生成

.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: ""; 
} 

。 iPhone）：

ジョンフォード|アメリカ| 1956年|アドベンチャー、ドラマ、西部| 119 MIN

単語の折り返しは予測できません。ここには完全な効果を与えるプランカーがあります：https://plnkr.co/edit/PkkNOKojOSA8O1oXw50d?p=preview（画面の幅の影響を受ける大量の空白があることがわかります）。

私は、これらのlisが含まれているdivの完全な（指定されていない）幅を埋めるようにしたいのですが、右側にあるときだけ次の行に折り返します（テキストが左から右1つのdiv）。しかし、|各リスト項目がプレゼンテーションに必要な後にパディングして、すべての値を単一のスパンまたはdivに入れて、 をたくさん使っていないと、どうやってそれを行うのか考えることはできません。

ヒントありがとうございます！ありがとう！

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

とliへ

float: left; 

から

Answer 1

変更.details liルールは文字

Updated plnkr

---

のように動作します

アップデートは

Updated plnkr ver. 2

は私がul/liを捨て、シンプルなspan年代を使用してこのマークアップ

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

と、この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: " | "; 
}