我想在我的列表项上应用带有 flexbox 和省略号的边框半径,并且还想要一个 min-width
,如下例所示。
<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/
目标是在应用了省略号的元素上应用边框半径
最佳答案
让它工作的一种方法是删除 <span>
标签。将所有内容放入 <li>
秒。
试试这个:
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
s 并简单地应用 border-radius
规则span
和 li
元素。
关于html - 带有文本溢出的 CSS Flexbox 边框半径 : Ellipsis,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33527292/