flexbox and text-overflow:ellipsis

by Binyamin

HTML

<p>Resize windows size to check the ellipsis appearance. <a href=http://code.google.com/p/chromium/issues/detail?id=142154 target=_blank>Chrome issue #142154</a></p>
flexbox li padding: 0 2%;
<ul class=list-a>
   <li>Link
   <li>Hyperlink
   <li>Longer Hyperlink
   <li>Hyperlink
   <li>Hyperlink
</ul>
       flexbox li padding: 0 10px; <mark>Webkit after ... (from window width 189px) jumps to whole text lenght.</mark>
<ul class=list-b>
   <li>Link
   <li>Hyperlink
   <li>Longer Hyperlink
   <li>Hyperlink
   <li>Hyperlink
</ul>
block li width: 20%; padding: 0 2%;
<ul class=list-c>
   <li>Link
   <li>Hyperlink
   <li>Longer Hyperlink
   <li>Hyperlink
   <li>Hyperlink
</ul>

CSS

body, ul {
    margin: auto;
}
ul {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    padding: 0;
    white-space: nowrap;
}
li {
    overflow: hidden;
    display: inline-block;
    -webkit-flex: 1;
    min-width: 0; /* Implied Minimum Size of Flex Items http://dev.w3.org/csswg/css3-flexbox/#min-size-auto */
    text-overflow: ellipsis;
    text-align: center;
    border: 1px solid #ccc;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}
.list-a li {
    padding: 0 2%;
}
.list-b li {
    padding: 0 10px;
}
.list-c {
    display: block;
}
.list-c li {
    width: 20%;
    padding: 0 2%;
}