css – 如何保持flex项目溢出由于其文本?

前端之家收集整理的这篇文章主要介绍了css – 如何保持flex项目溢出由于其文本?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有以下布局的列表。每个列表项由两列表示。第二列应占用所有可用空间,但如果第一列占用太多空间,则应使用最小大小将其固定在右侧。第一列应显示省略号。

问题出现在最后一种情况。当第一列由太多的文本组成,而不是显示省略号时,它会伸出FlexBox,导致出现水平滚动条,而第二列不会锚定在右侧。

我想让它像这样(mockup):

我如何实现呢?

这是sample fiddle

HTML:

<!-- a small first column; the second column is taking up space as expected -->
<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<!-- a large first column; the first column is overflowing out of the flexBox container -->
<div class="container">
    <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
    foo barfoo barfoo barfoo barfoo barfoo barfoo bar
    foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div>

CSS:

.container {
    display: -webkit-flex;
}

div {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.container > div:last-child {
    -webkit-flex: 1;
    background: red;
}

解决方法

更新

添加工作原理的代码

.container {
    display: -webkit-flex; 
}

.container>div:first-child{
    white-space:nowrap;
   -webkit-order:1;
   -webkit-flex: 0 1 auto; /*important*/
    text-overflow: ellipsis;
    overflow:hidden;
    min-width:0; /* new algorithm overrides the width calculation */
}

.container > div:last-child {
    -webkit-flex: 1;
    -webkit-order:2;
    background: red;
    -webkit-flex:1 0 auto; /*important*/
}
.container > div:first-child:hover{
    white-space:normal;
}
<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<div class="container">
        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div>
<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<div class="container">
        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div><div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

原始答案/解释。

W3C规范说,“默认情况下,flex项目不会缩小到它们的最小内容大小(最长字或固定大小的元素的长度)之下。要改变它,设置’min-width’或’min-height’属性。”

如果我们遵循这一推理,我相信这个错误已经从金丝雀中删除,而不是相反。

检查,只要我把最小宽度为0,它工作在金丝雀。

所以bug是在旧的实现,而金丝雀删除该bug。

这个例子是在金丝雀工作。 http://jsfiddle.net/iamanubhavsaini/zWtBu/

我使用Google Chrome版本23.0.1245.0金丝雀。

原文链接:https://www.f2er.com/css/222206.html

猜你在找的CSS相关文章