CSS Flexbox Border Radius With Text-overflow: Ellipsis

I want to apply border radius with flexbox and ellipsis on my list items and also want a min-width like the example below.

• A<

Solution 1:

One way to make it work would be to remove the <span> tags. Put everything into the <li>s.

Try this:

HTML (removed span tags)

<ul>
    <li style="flex: 1 1;">A</li>
    <li style="flex: 2 2;">this is a pretty long text that will overflow the parent
                          container</li>
    <li style="flex: 1 1;">C</li>
</ul>

CSS

ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

li {     
    padding: 0em 1em;
    background-color: blue;
    border-radius: 2em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: white;
}

DEMO: http://jsfiddle.net/kah0bn6o/5/

Alternatively, you could keep the spans and simply apply the border-radius rule to both span and li elements.

DEMO: http://jsfiddle.net/kah0bn6o/7/

Solution 2:

If you can live without the span then you can just move all the styles on to li instead.

http://jsfiddle.net/f6Lgbtre/

li {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: white;
    background-color: blue;
    padding: 0em 1em;
    border-radius: 1em;
}

and

<li style="flex: 1 1;">A</li>