带有文本溢出的 CSS Flexbox 边框半径:省略号 [英] CSS Flexbox Border Radius with text-overflow: Ellipsis

问题描述

我想在我的列表项上应用带有 flexbox 和省略号的边框半径，并且还想要一个 min-width 如下例所示.

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;
}

示例如下http://jsfiddle.net/mnk/kah0bn6o/1/

目标是在应用了省略号的元素上应用边框半径

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

推荐答案

使其工作的一种方法是删除 标签.将所有内容放入

中.

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

试试这个:

HTML(删除了 span 标签)

<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;
}

演示:http://jsfiddle.net/kah0bn6o/5/

或者，您可以保留 span 并简单地将 border-radius 规则应用于 span 和 li元素.

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

演示:http://jsfiddle.net/kah0bn6o/7/

这篇关于带有文本溢出的 CSS Flexbox 边框半径:省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！