title: Can inline-block list items word-wrap onto new lines?
body: <p>I have a series of details within an unordered list that I want to display inline. The problem I have is that, for a relatively small area, some of the list items are pretty long.</p>
  
  <p>This is the ul I'm appending to my view:</p>
  
  <pre><code>"&lt;ul class='details'&gt;" +
    "&lt;li&gt;" + val.Director + "&lt;/li&gt;" +
    "&lt;li&gt;" + val.Country + "&lt;/li&gt;" +
    "&lt;li&gt;" + val.Year + "&lt;/li&gt;" +
    "&lt;li&gt;" + val.Genre + "&lt;/li&gt;" +
    "&lt;li&gt;" + val.Runtime + "&lt;/li&gt;" +
  "&lt;/ul&gt;"
  </code></pre>
  
  <p>And this is my CSS:</p>
  
  <pre><code>.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: "";
  }
  </code></pre>
  
  <p>Which produces the following (approx. four lines of text when viewed on an iPhone): </p>
  
  <p>JOHN FORD | USA | 1956 | ADVENTURE, DRAMA, WESTERN | 119 MIN</p>
  
  <p>The word wrapping is unpredictable. Here is the plunker to give the full effect: <a href="https://plnkr.co/edit/PkkNOKojOSA8O1oXw50d?p=preview" rel="nofollow">https://plnkr.co/edit/PkkNOKojOSA8O1oXw50d?p=preview</a> (you'll see that there are large amounts of white space, affected by screen width).</p>
  
  <p>I would like to have these lis fill the full (unspecified) width of the div they are contained in and only wrap to the next line when at the right hand side (as if the text had been written left to right in a single div). However, because the | and padding after each list item is necessary for presentation, and short of putting all my values into a single span or div and using a lot of &nbsp;, I can't think how to do it.</p>
  
  <p>Any tips appreciated! Thanks!</p>