我正在使用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获得的结果:
您可以使用以下简单属性来解决:
.flex { min-width: 0; }
看更多 :
http://www.w3.org/TR/css-flexbox-1/#min-size-auto