I'm working on displaying a series of details within an unordered list inline, but facing an issue with some list items being too long for the relatively small area available.
This is the unordered list I'm adding to my view:
"<ul class='details'>" +
"<li>" + val.Director + "</li>" +
"<li>" + val.Country + "</li>" +
"<li>" + val.Year + "</li>" +
"<li>" + val.Genre + "</li>" +
"<li>" + val.Runtime + "</li>" +
"</ul>"
Here is the CSS I'm using:
.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: "";
}
Output on an iPhone (approximately four lines of text) looks like this:
JOHN FORD | USA | 1956 | ADVENTURE, DRAMA, WESTERN | 119 MIN
The word wrapping is causing unpredictability. Check out the plunker for a better understanding: https://plnkr.co/edit/PkkNOKojOSA8O1oXw50d?p=preview (you'll notice excessive white space influenced by screen width).
I'm aiming to have these list items fill the entire width of the div they're in, wrapping only when they reach the right-hand side like text written left to right in a single div. However, I need the "|" and padding after each item for presentation, and I'm unsure how to achieve this without resorting to numerous non-breaking spaces or wrapping all values in a single span or div.
If you have any helpful tips, I'd greatly appreciate it. Thank you!