Display li element caption in two lines, to fit into max-width - html

Question

Jsfiddle as,
https://jsfiddle.net/9qyv03u3/
How can i break the li caption string into two lines so that they will fit into a maximum width?
In jsfiddle, the menu items are placed in a single line but inside my 50% width container in firefox, it gets rendered as,
This will lead to user pressing the wrong menu option. So, i prefer all menu options horizontally placed like,
Save & Run | Run saved | Run selected |
suite | suite | tests |

Answer 1

You can do this by making the ul a flexbox:
ul {
display: flex;
}
ul {
display: flex;
width: 20em;
border: 4px solid gray;
padding: 0.5em 2em;
margin: 5em auto;
list-style: none;
font: 14px verdana;
}
li {
margin: 20px 30px 10px 0;
border-right-style: dotted;
padding-right : 15px;
text-align: center;
}
<ul>
<li>Save & Run suite</li>
<li>Run saved suite</li>
<li>Run selected tests</li>
</ul>
… or by making each li a table-cell:
li {
display: table-cell;
}
ul {
width: 20em;
border: 4px solid gray;
padding: 0.5em 2em;
margin: 5em auto;
list-style: none;
font: 14px verdana;
}
li {
display: table-cell;
margin: 20px 30px 10px 0;
border-right-style: dotted;
padding-right : 15px;
text-align: center;
}
<ul>
<li>Save & Run suite</li>
<li>Run saved suite</li>
<li>Run selected tests</li>
</ul>

Answer 2

You can display the list items as table cells. You may need to tweak the margins and paddings a bit, but this way the items will be next to each other always.
ul{
display: table;
width: 20em;
border: 4px solid gray;
margin: 5em auto;
padding: 20px 0 0 0;
list-style: None;
height: 30px;
}
li {
display: table-cell;
border-right-style: dotted;
padding-right : 15px;
}
<ul>
<li>Questions</li>
<li>Tags liek bla blo foo bar bak nam plo and sni</li>
<li>Users</li>
</ul>

Answer 3

CSS tables I would suggest.
ul {
width: 20em;
border: 4px solid gray;
padding: 0.5em 2em;
margin: 5em auto;
list-style: None;
height: 30px;
display: table;
table-layout: fixed;
}
li {
display: table-cell;
text-align: center;
vertical-align: middle;
border-right: 1px dotted black;
}
<ul>
<li>Questions & Answers</li>
<li>Tags</li>
<li>Users</li>
</ul>

Answer 4

You can also use the column-count property to define CSS columns. This is a quick and easy way of achieving the desired effect.
ul {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
width: 25em;
border: 4px solid gray;
padding: 1.5em;
margin: 5em auto;
list-style: None;
font-size: 12pt;
font-family: Arial, sans-serif;
}
li {
text-align: center;
border-right-style: dotted;
padding-right: 10px;
}
li:last-child {
border: 0;
}
<ul>
<li>Save & Run suite</li>
<li>Run saved suite</li>
<li>Run selected tests</li>
</ul>