CSS Flexbox Border Radius with text-overflow: Ellipsis

Question

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

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

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

li {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: white;
}

span {
    background-color: blue;
    padding: 0em 1em;
    border-radius: 1em;
}

Here's the example http://jsfiddle.net/mnk/kah0bn6o/1/

The goal is to apply the border radius on the element with the ellipsis applied

Michael Benjamin · Answer 1 · 2015-11-04T19:38:43.603

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/

edited Nov 04 '15 at 19:38

answered Nov 04 '15 at 18:47

Michael Benjamin

346,931
104
581
701

nice point but the span is there to only wrap the word the "A" width should be 20px maximum – mnk Nov 04 '15 at 18:52
then simply adjust the `flex` rule you have in your inline style: `flex: 0 1 20px`... http://jsfiddle.net/kah0bn6o/6/ – Michael Benjamin Nov 04 '15 at 18:53
1

add a copy of the `border-radius` to the `li` and you're done: http://jsfiddle.net/kah0bn6o/7/ – Michael Benjamin Nov 04 '15 at 19:07

score 0 · Answer 2 · answered Nov 04 '15 at 18:47

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>

CSS Flexbox Border Radius with text-overflow: Ellipsis

2 Answers2

Linked