文本溢出省略号和 flex 在 Firefox 上不起作用答案

【问题标题】：text-overflow ellipsis and flex not working on Firefox文本溢出省略号和 flex 在 Firefox 上不起作用
【发布时间】：2016-03-15 22:31:07
【问题描述】：

我正在使用 Polymers flex 布局和文本溢出省略号，省略号适用于 Chrome 和 Safari，但不适用于 Firefox。

HTML

     <footer>
        <div>
            <div class="layout horizontal center">
                <div class="avatar">
                    <img src="img.jpg" alt="img" />
                </div>
                <div class="flex">
                    <a class="layout vertical">
                        <p class="text-overflow">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
                        <span>12 items<span>
                    </a>
                </div>
                <div class="more">
                    <img src="img.jpg" alt="img" />
                </div>
            </div>
        </div>
    </footer>

CSS

footer {
    max-width: 450px;
    width: 100%;
    overflow: hidden;
}

.layout.horizontal {
    display: flex;
    display: -webkit-flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
}

.layout.vertical {
    display: flex;
    display: -webkit-flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
}

.flex {
    flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
}

.avatar {
    height: 30px;
    width: 30px;
    background: green;
}

.text-overflow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.more {
    width: 30px;
    height: 30px;
    background: red;
}

这是我使用 Chrome 得到的结果：

这是我使用 Firefox 得到的结果：

【问题讨论】：

尝试在你有 -ms- 和 -webkit- 的地方添加 -moz- 特定规则。我认为 -ms- 用于 IE，-webkit- 用于 Chrome、Safari 等。-moz- 用于 Firefox。
不幸的是它不起作用。不过感谢您的帮助。
查看需求：stackoverflow.com/a/33061059/3597276
你试过 Chrome canary / dev 频道吗？（你测试过 Edge 吗？）Chrome 对 min-width:auto 的支持落后于 Firefox 和 Edge 有一段时间了，这使得许多类似的情况在 Chrome 中“有效”，而不是在其他浏览器中（因为 Chrome 有错误的默认行为，按照规范）。我相信，Chrome 开发频道在这方面与其他引擎更相似。
是的，我们认为这是正确的，它通常比 chrome 工作，但它是 chrome 有错误。

标签： html css firefox flexbox

【解决方案1】：

您可以使用这个简单的属性来解决：

.flex {
     min-width: 0;
}

【讨论】：