3

I am using Polymers flex layout and text-overflow ellipsis, the ellipsis is working on Chrome and Safari but not 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;
}

This is the result I am getting with Chrome:

This is the result I am getting with Firefox:

enter image description here

Rick Butterworth
  • 33
  • 5
  • Try adding -moz- specific rules where you have -ms- and -webkit- stuff. I think -ms- is for IE and -webkit- is Chrome, Safari, etc. -moz- is Firefox. – Olly John Dec 10 '15 at 10:31
  • Unfortunately it doesn't work. Thanks for the help though. – Rick Butterworth Dec 10 '15 at 11:17
  • See the requirements: http://stackoverflow.com/a/33061059/3597276 – Michael Benjamin Dec 10 '15 at 13:03
  • Thanks Michael_B, but my issue is that Chrome appears to work fine using flex but firefox doesn't. Is this an issue with Firefox? – Rick Butterworth Dec 10 '15 at 16:55
  • 1
    Have you tried Chrome canary / dev channel? (And have you tested Edge?) Chrome's `min-width:auto` support was lagging behind Firefox & Edge for a while, which made many cases like this "work" in Chrome & not in other browsers (because Chrome had the wrong default behavior, per spec). Chrome dev channel is more similar to other engines on this, I believe. – dholbert Dec 10 '15 at 17:02
  • 1
    Yes, it's very often than chrome works as we think that's correct, but it's chrome that has the bugs. – Marcos Pérez Gude Dec 10 '15 at 17:04
  • [enter link description here](https://stackoverflow.com/a/49685789/3929978) working fine Mozilla Firefox – Nikit Barochiya Apr 06 '18 at 05:15

1 Answers1

7

You can workaround with this simply property:

.flex {
     min-width: 0;
}

See more :

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

Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69