google-chrome - 如何防止 flex 元素因其文本溢出？

This question already has answers here:

Why don't flex items shrink past content size?

(2个答案)


3年前关闭。




我将以下布局考虑在内。每个列表项由两列表示。第二列应占用所有可用空间，但如果第一列占用太多空间，则应以最小大小将其 anchor 定在右侧。第一栏应显示省略号。

最后一种情况正在发生问题。当第一列包含太多文本时，它没有显示省略号，而是将其自身拉伸(stretch)到flexbox之外，从而导致出现水平滚动条，而第二列则没有 anchor 定在右侧。

我想要这样渲染(模型):

我该如何实现？

这是sample fiddle。

.container {
    display: -webkit-flex;
}

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

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

<!-- 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>

最佳答案

更新

添加有效的代码:

.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规范说:“，默认情况下，伸缩项不会缩小到其最小内容大小(最长的单词或固定大小的元素的长度)以下。要更改此设置，请设置“最小宽度”或“最小高度” '属性。“

如果我们遵循这一思路，我相信该错误已从Canary中删除，而不是相反。

一旦将min-width放入0，请检查它在Canary中的工作原理。

因此，该错误是在较早的实现中出现的，而canary删除了该错误。

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

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