如何保持Flex项目不会由于其文本溢出？ [英] How to keep a flex item from overflowing due to its text?

问题描述

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

I have the following layout in mind for a list. Each list item is represented by two columns. The second column should take up all available space, but it should be anchored to the right with its minimum size if the first column is taking up too much space. The first column should then show an ellipsis.

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

The problem is happening in that last case. When the first column consists of too much text, instead of showing an ellipsis, it stretches itself out of the flexbox causing an horizontal scrollbar to appear, and the second column is not anchored to the right.

我想让它像这样（mockup）：

I would like to have it rendered like this (mockup):

如何实现？

示例小提琴。

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

推荐答案

UPDATE

添加可工作的代码：

UPDATE

Adding code that works:

.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项目不会缩小到最小内容大小字或固定大小的元素）。要更改此值，请设置最小宽度或最小高度属性。

这行推理，我相信这个bug已经从金丝雀中删除，而不是相反的。

If we follow this line of reasoning, I believe the bug has been removed from Canary, not the other way round.

一旦我将 min-width 检查为 0 ，它在金丝雀工作。

Check as soon as I put min-width to 0, it works in Canary.

所以，在旧的实现中，bug是可以删除的。

So bug was in older implementations, and canary removes that bug.

http://jsfiddle.net/iamanubhavsaini/zWtBu/

我使用Google Chrome版本23.0.1245.0 canary。

I used Google Chrome Version 23.0.1245.0 canary.

这篇关于如何保持Flex项目不会由于其文本溢出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！