当前位置:  开发笔记 > 前端 > 正文

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

如何解决《文本溢出省略号和flex在Firefox上不起作用》经验,为你挑选了1个好方法。

我正在使用Polymers flex布局和文本溢出省略号,该省略号可在Chrome和Safari上使用,但不能在Firefox上使用。

的HTML

     

的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获得的结果:



1> Marcos Pérez..:

您可以使用以下简单属性来解决:

.flex {
     min-width: 0;
}

看更多 :

http://www.w3.org/TR/css-flexbox-1/#min-size-auto

推荐阅读
殉情放开那只小兔子
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有